php 获取手机屏幕宽度,网页宽度自动适应手机屏幕宽度的方法 【html5构建触屏网站】之网站尺寸...

在网页的

中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度。

其中：

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来对图片进行缩小)，然后，让页面自动按照比例缩放。这样一来，低密度的手机有滚动条(这种手机基本上已经没有人在用了)，中密度的手机会浪费一点点流量，高密度的手机完美呈现，超高密度的手机轻微失真(超高密度的安卓手机很少)。这种方案的优点非常明显：只需要一套设计稿，一套代码(这里只是讨论安卓手机的情况)。