在网页的
中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度。其中:
width=device-width :表示宽度是设备屏幕的宽度
initial-scale=1.0:表示初始的缩放比例
minimum-scale=0.5:表示最小的缩放比例
maximum-scale=2.0:表示最大的缩放比例
user-scalable=yes:表示用户是否可以调整缩放比例
如果是想要一打开网页,则自动以原始比例显示,并且不允许用户修改的话,则是:
这样子写后,就可以把一些页头横幅等的图片的宽度都设置成style=”width:100%”,整个页面在设备上看起来就是全屏的了。
页面随着设备的宽度变化,当由竖屏变成横屏的时候,整体页面按比例全部变大,包括字和图片的尺寸都相应的变大
浏览器与图片显示
竖着状态,如iPhone4, 宽度像素640,而一般Symbian S60宽度320.由于为了阅读体验,iPhone4和Symbian默认浏览器的布局视区宽度都是320像素,因此iphone4的设备像素比devicePixelRatio为2, Symbian为1.
这所导致的问题就是实际320像素宽的图片在Symbian上是正常比例宽度满屏显示;而在iPhone4上,也是宽度满屏,但图片实际两倍拉伸了,因此,如果图片本身质量不高,就会有模糊的拉伸——视网膜屏幕的iPhone反而效果不好。
width=device-width
其实这个属性&值很有意思,字面意应该是 viewport宽度等于设备宽度,但在实际中不同的浏览器都给出了个定值:320px;这个值还是源于 Apple,因为早期 iPhone 的分辨率为 320px ×480px,大量为 iPhone 量身定制的网站都设置了width=device-width,并且按照宽度 320px 来设计制作,所以其他浏览器加入 viewport 支持时为了兼容性也将 device-width 定义为了 320px。
http://www.cnblogs.com/shawn-xie/archive/2012/12/19/2824728.html
viewport的使用
viewport总共有5个属性,分别如下:
在这些属性里面,我们重点关注target-densitydpi,这个属性可以改变设备的默认缩放。medium-dpi是target-densitydpi的默认值,如果我们定义target-densitydpi=device-dpi,那么设备就会按照真实的dpi来渲染页面。打个比方说,一张320*480的图片,放在iphone4里面,默认是占满屏幕的,但如果定义了target-densitydpi=device-dpi,那么图片只占屏幕的四分之一(二分之一的平方),因为iphone4的分辨率是640*960。
解决方案
(1) 简单粗暴
如果我们按照320px宽的设计稿去制作页面,并且不做任何的设置,页面会默认自动缩放到跟手机屏幕相等的宽度(这是由于medium-dpi是target-densitydpi的默认值,和不同密度对应不同缩放比例所决定的,这一切都是移动设备自动完成的)。所以这种解决方案,简单,粗暴,有效。但有一个致命的缺点,对于高密度和超高密度的手机设备,页面(特别是图片)会失真,而且密度越多,失真越厉害。
(2) 极致完美
在这种方案中,我们采用target-densitydpi=device-dpi,这样一来,手机设备就会按照真实的像素数目来渲染,用专业的话来说,就是1 CSSpixels = 1 device pixels。比如对于 640*960的 iphone,我们就可以做出640*960的页面,在iphone上显示也不会有滚动条。当然,对于其他设备,也需制作不同尺寸的页面,所以这种方案往往是使用媒体查询来做成响应式
的页面。这种方案可以在特定的分辨率下完美呈现,但是随着要兼容的不同分辨率越多,成本就越高,因为需要为每一种分辨率书写单独的代码。下面举个简单的例子:
#header {background:url (medium-density-image.png);}@media screen and (- webkit -device-pixel-ratio:1.5) {/* CSS for high-density screens */#header { background:url (high-density-image.png);}}@media screen and (- webkit -device-pixel-ratio:0.75) {/* CSS for low-density screens */#header { background:url (low-density-image.png);}
(3) 合理折中
针对安卓设备绝大多数是高密度,部分是中密度的特点,我们可以采用一个折中的方案:我们对480px宽的设计稿进行还原,但是页面制却做成320px宽(使用background-size来对图片进行缩小),然后,让页面自动按照比例缩放。这样一来,低密度的手机有滚动条(这种手机基本上已经没有人在用了),中密度的手机会浪费一点点流量,高密度的手机完美呈现,超高密度的手机轻微失真(超高密度的安卓手机很少)。这种方案的优点非常明显:只需要一套设计稿,一套代码(这里只是讨论安卓手机的情况)。