为什么手机网页都是980px
㈠ 一般网页的尺寸是多大
宽度通常980px, 990px,1000px的都有,还有的是适用以前老屏的960的(现在用的少了),高度不限,主要根据你网站针对的对象。
㈡ 设置什么视口是响应式设计、移动端开发的基础
设置布局视口是响应式设计、移动端开发的基础。
1、移动设备的浏览器都默认设置一个布局视口,用于解决早期的pc端在手机上显示的问题。
2、ios、Android基本都将这个视口分辨率设置为980px,所以pc上的网页大多都可以在手机上呈现。
㈢ 页面的版心为980px什么意思
指页面最大宽度不超过980px,当用户显示屏的宽度超过980px时候 页面水平居中,超过980px的显示区域显示为白底,页面始终显示在屏幕的中间。如果显示屏宽度低于980px时,就会出现纵向滚动条。设置版心有利于兼容不同尺寸的显示屏,从而无论使用何种宽度的显示屏都能得到同样的页面显示效果。
㈣ 网页的两种尺寸1180px,980px是指什么
这应该是分辨率吧,一般调成1280*960就可以了
㈤ 宽度设置成980px 所有手机就都可以正好横向满屏不需要滚动条
<body rightmargin="0" leftmargin="0" topmargin="0" bottommargin="0"> ↑ ↑ ↑ ↑ 说明: 右边距 左边距 顶部边距 底部边距 因为拖动条宽度是20,左右两边都要各自留出2的边框 在800*600下要做个满IE的表格,图象的话就用800-2*2-20=776 单位是像素 1024*768就是1000 上面说的是保守的估计,其实在不同的操作系统下和不同的WINDOWS皮肤下也会不一样的,在不同的浏 览器下也是,在2000下就比在XP下能显示得多一些。 列如腾讯的TT 2.3 1024*768下 能显示满屏尺寸 1007*572 而IE 6.0 1024*786下 满屏尺寸 1003*597 所以在设置宽度的时候800*600最好选764 1024*768可以选到100-1003之间,最大不能超过1006 这里仅仅提供参考。当然,用百分比的话就不会用到上诉的问题,而有很多网页都是不适合拉伸的。 如果怕超出了会出现不想出现的拖动条,可以参考这里,加入里面的代码,这样满屏显示就完美的 解决了。
㈥ 浏览器显示的网页不能占满窗口。居中显示。
这个没有办法,如果你要调的话只能让画面变形也就是变扁。不推荐,还是这样显示比较好。因为你的屏幕分辨率就是这样的,如果你非要调的话,可以在桌面右键属性,调节分辨率,如果不好用的话,就设置注册表吧。
㈦ 求助网页的显示分辨率是怎么回事
打开网页后,网页被拉得宽宽的,像是被拉长了一样,用PPS看电影也是这个样子,本来桌面也是这样的图标变大,壁纸被拉大,后来我调整了分辨率,桌面回复正常了,但是打开网页和PPS还是那个样子,被拉得长长宽宽的、
㈧ 页面布局方案
例如:对于DPR=2的Retina屏幕而言1个位图像素对应于4个物理像素,由于单一位图像素不可再分割,所以只能就近取色,从而导致图片模糊。所以对于图片清晰度问题,较好的方案是提供两倍图 @x2 。
像素密度表示设备屏幕能够显示的设备独立像素DIP的数量,屏幕显示的像素数量越多画面也就越精细,同时同样屏幕区域能够显示的信息也就越多。
屏幕由像素点组成,每个像素点发出不同颜色的光,进而构成界面。而屏幕的物理尺寸与像素尺寸是不成比例的。不同尺寸的手机屏幕拥有不同的分辨率,分辨率实际上是手机像素的宽高尺寸。
像素密度(pixels per inch,PPI或DPI)表示每英寸长度上排列的设备独立像素点DIP的个数,1英寸等于2.53厘米。像素密度PPI越高则表示屏幕分辨率越高进而屏幕显示越精细。Retine屏幕比普通屏幕清晰的原因,是因为它的像素密度是普通屏幕的数倍。
例如:3.5英寸的iPhone手机屏幕
日常所说的屏幕尺寸,实际是指屏幕对角线的长度。计算像素密度首先需要计算设备屏幕对角线等效像素,然后除以对角线长度。例如HTC G7分辨率为480x800,3.7英寸,计算出像素密度为252PPI。
像素密度PPI = 平方像素宽加平方像素高之和开平方的结果,再除以屏幕对角线的英寸数。
密度决定比例
通过计算像素密度PPI可以得知设备屏幕属于哪个密度区间,因为不同密度区间对应着不同的默认缩放比例。
通俗来说视区 Viewport 就是浏览器上用来显示页面的区域,也就是说,浏览器的实际宽度和手机宽度不一样,无论手机宽度是320px或640px,在手机浏览器内部宽度始终会是浏览器本身的视区。
现代浏览器都会给自身的视区提供一个默认值,大多会以980px或1024px为主。在移动端视区默认一般来说是会大于手机屏幕的,所以当在桌面浏览器正常显示的页面,会以960px设计主区域。放到移动端就会出现横向滚动条,因此会专门会给浏览器设计移动端的页面。
移动端浏览器会将页面放在一个虚拟的窗口 viewport 中,通常这个虚拟的窗口会比屏幕宽,这样就不用将每个页面挤到很小的窗口中,以防止破坏没有针对手机浏览器优化的网页布局,用户可以通过平移或缩放来查看页面中的不同部分。
页面中视区 viewport 是可绘制的区域,虽然视区的可视面积和屏幕尺寸相匹配,但视区页由自己的尺寸,用来确定页面中的像素数量。
在 iPhone 和 Android 平台中 WebKit 内核的历览器使用980像素宽的视见区或逻辑尺寸,相当于viewport中的width=980px。当页面加载后,页面内容通常被完全缩放以便整个页面都可见,尽管内容会被缩放的非常小且不可读。
在Web页面中,可通过JS动态获取相关参数。
根据目前市场主流移动终端,统计设备独立像素后,移动端H5设计稿推荐尺寸为640 x 1136、750 x 1334。
除去浏览器全屏显示,几乎所有情况下均会存在顶部状态栏和导航栏。根据iPhone标准,状态栏和导航栏的独立像素高度分别为40px和88px。Android平台可以更改状态和导航栏高度可取默认值48px和100px为准。在网页中就会将页面内容向下挤入盲区,根据不同的布局方式可能会挤出视口,也就是可视区域之下。因此取两个平台的最大值148。因此设计稿要尽量保证单页下没有重要内容。如果要在所有屏幕上将重要内容显示完全,需要注意市面上存在的小尺寸屏幕,绝对部分智能机分辨率在640 x 960之上,因此只要重要内容放在盲区之上即可。计算出的最安全高度为812 = 960 - 148。
简单来说视区 Viewport 是严格等于浏览器的窗口,在桌面浏览器中视区就是浏览器窗口的宽高,但在移动设备上由于视区太窄,为了更好的为 CSS 布局服务,所以提供了两个视区,分别是可见视区 Visual Viewport 和布局视区 Layout Viewport 。
如果将移动设备浏览器的可视区域设置为Viewport,某些网站会因为Viewport太窄而显示错乱,所以浏览器会默认将Viewport设置为一个较宽的值,比如980px,使得为桌面浏览器设计的网站也能在移动设备浏览器上正常显示。这个浏览器默认的Viewport也就是Layout Viewport布局视区。布局视区的宽度可以使用JavaScript的 document.documentElement.clientWidth 获取。移动设备中默认的视区就是Layout Viewport。
布局视区的宽度是大于浏览器可视区域的宽度的,因此需要一个Viewport来表示浏览器可视区域大小,这个Viewport也就是可见视区Visual Viewport,可见视区可使用JavaScript的 document.documentElement.innerWidth 获取。
Ideal Viewport是一个能完美适配移动设备的Viewport,首先无需缩放和横向滚动条就能正常查看页面所有内容,其次显示的文字、图片大小合适。比如14px的文本不会因为一个高密度像素的屏幕而显示的太小或无法看清。无论在何种密度屏幕、何种分辨率下,显示出来的大小都差不多,这个Viewport也就是Ideal Viewport。
Ideal Viewport并没有一个固定的尺寸,不同的设备拥有不同的尺寸。比如在IPhone设备中Ideal Viewport宽度是320px,无论屏幕宽度是320还是640的。Ideal Viewport的意义在于,无论在何种分辨率下,针对Ideal Viewport而设计的页面无需缩放和横向滚动条都可以完美地呈现给用户。
移动设备中默认的视区是Layout Viewport,在进行移动设备页面开发时则需要Ideal Viewport。要得到完美视区,需设置 meta 标签。
该 meta 标签的作用是让当前视区宽度等于设备宽度,同时不允许用户手动缩放。 minimum-scale=1.0 与 maximum-scale=1.0 并不是必需的。但 width = device-width 则是必须的,以保证不会出现横向滚动条。
width 能够控制默认布局视区Layout Viewport的宽度,若不指定则默认会是980px或1024px,这个值会由设备自身所决定。当把布局视区宽度设置为移动设备宽度 width = device-width 时,此时布局视区将会变成完美视区。
其实要将当前视区宽度设置为完美视区宽度,既可以设置 width = device-width 也可以设置 initial-scale = 1.0 ,但是单单设置 width = device-width 会导致iPhone、iPad设备中横竖屏不分,单单设置 initial-scale = 1.0 则会导致IE中横竖屏不分。所以都以竖屏的完美视口宽度为标准,最完美的写法时两则都写上去, width = device-width 解决iPhone、iPad缺陷, initial-scale = 1.0 则解决IE的缺陷。
CSS3新增视区单位vm和vh,在移动端iOS8+和Android4.4+获得支持。
设备像素比定义了物理像素与设备独立像素之间的对应关系,计算公式为:设备像素比 = 物理像素 / 设备独立像素。
在CSS中可通过以下方式进行媒体查询,针对不同DPR设备做出样式适配。
在JavaScript中可通过 window.devicePixelRatio 获取当前设备的DPR。
在Ratina高清设备屏幕中一个CSS像素对应4个物理像素
Web页面设置视口后,页面与屏幕是1:1显示,移动设备都具有设备像素比 DPR ,当DPR=2时移动设备上的一个CSS像素由4个物理像素点组成。
安卓客户端限制了 viewport 设置的缩放属性,让客户端放开限制就行,但是由于市场上的app版本还是不支持,所以需要做兼容性处理。
iPhone6 上有1px 的滚动条,最后处理方案是通过 viewport 中的 maximum-scale 的值加了0.1,由于设置了user-scalable=no,maximum-scale 的值加0.1并不会有什么影响。
通过JS动态获取移动设备的设备像素比,通过设备像素比来计算并设备Web页面中 html 标签的字体大小 font-size 以及缩放比例。
例如:动态设置 html 的font-size, 同时根据设备DPR调整页面的缩放值,进而达到高清效果。
rem 全称 font size of the root element 是指相对于根元素的字体大小的相对单位,计算规则依赖于根元素。
rem 是通过根元素进行适配的,web中根元素是指 html ,所以通过设置 html 的字体大小即可控制 rem 的大小。
REM布局的核心是设置好根 html 元素的字体大小 font-size ,为了防止在高清屏下像素不够用而导致模糊,当拿到移动设计稿时,移动设计稿一般会以iPhone5设备宽320px或iPhone6设备宽375px为基准,制作出两倍宽的设计稿,即640px或750px。
例如:设置 html 标签的 font-size:10px ,6rem即6*10px。
rem 适用于WebApp,出于兼容性考虑,WebApp下使用 rem 更加能凸价值和功能。
使用CSS的媒体查询控制
移动UI设计稿会采用iPhone宽度作为标准
使用JS控制Web页面文字大小使其自适应屏幕
使用 rem 布局的本质是等比缩放,一般是基于宽度。
将屏幕宽度均分100份,每一份的宽度使用x表示,即x=屏幕宽度/100,如果将x作为单位,x前面的数值代表屏幕宽度的百分比。想要屏幕元素随着屏幕宽度等比缩放,只需要确定x单位,可通过CSS3中的 rem 来实现。可通过JS设置HTML字体大小等于屏幕宽度的百分之一。
若UE设计稿宽度尺寸为640px,设计稿中某元素宽度为100px,则可以计算出100 / 640px * 100px = 15.625。
最佳实践:px2rem移动端自适应方案 https://github.com/imochen/hotcss
字体大小不能使用 rem ,因为字体大小和字体宽度并不是线性关系,所以字体大小不能使用 rem 。由于设置根元素字体大小会影响所有没有设置字体大小的元素,因为字体大小是会继承的,可以在 body 上做字体修正。
如何实现字体的响应式,可通过修改 body 字体大小,同时设置字体大小使用 em 单位。
㈨ the new iPad 的分辨率达到了2048,但为什么用它看网页(大多是980px分辨率)左右两侧却没有大的留白呢
这跟系统和浏览器是有关系的,浏览器本身会调整网页的显示方式,已达到最好的浏览体验,如果两边留白那实际看到的文字内容就会很小,浏览网页的感觉就会大打折扣