{ "title": "给Mobile网页指定合适的viewport", "description": "由于Mobile设备的硬件环境十分复杂,在Mobile上的开发与PC端是有很大区别的。这个viewport就是一个麻烦的东西。它有一大堆可用参数,一大堆值。更关键的是浏览器兼容性能上还有问题。不过这个viewport是Mobile Web开发的基础,不搞清楚就啥都做不了。", "keywords": "Mobile,viewport", "content": "  首先,我们啥也不设置,直接来个最基本的网页\r\n\r\n \r\n 次碳酸钴\r\n \r\n\r\n]]>\r\n  普通的PC端浏览器是根据浏览器的窗口大小来计算网页大小的,而很多Mobile设备的操作系统没有窗口的概念。为了解决这个问题引入了viewport来替代这个网页大小的计算。由于Mobile设备的屏幕大小问题,viewport并不直接以屏幕的尺寸来计算宽度,而是有一个默认的宽度。这样它就能兼容上普通PC端的网页了。所以上面的代码在Mobile设备上显示会很蛋疼,因为默认的viewport宽度是很宽的(大概960px左右,足以容纳普通的PC端网页了,具体没了解,可能也有浏览器差异)。根据不同的浏览器一般会有两种显示方式,一种是viewport是默认缩放是100%的,则会出现滚动条。另一种是viewport的默认宽度是设备宽度的,则会把网页内容缩小的很惨。掺入了缩放的概念,和就意味着viewport这东西是可以缩放的。一般的Mobile都可以使用两个手指触屏来实现缩放(双击也有缩放功能)。这样就让viewport和玩意儿变得更繁琐起来。
\r\n  为了让网页在移动设备上正常显示,我们就需要设置这个viewport的参数来指定它的行为。可以使用HTML标签中的META标签来设置\r\n\r\n]]>\r\n  主要参数有下面几个:
\r\n    maximum-scale:用户可以缩放的最大值
\r\n    minimum-scale:用户可以缩放的最小值
\r\n    initial-scale:viewport的默认缩放大小
\r\n    width:固定viewport的宽度
\r\n    height:固定viewport的高度
\r\n    user-scalable:是否允许用户缩放
\r\n  前三个参数都是缩放相关的,它们的值是viewport的缩放大小,他们仅仅改变缩放大小,并不是改变viewport的实际大小。比如要让网页加载时候显示两倍大小就可以加上这个\r\n\r\n]]>\r\n  之后就是width和height,修改这俩东西就和我们在PC上访问网页时候用鼠标拖动浏览器来改变大小一样。或者说是浏览器(页面区域)在屏幕上的默认大小。可以是具体的数值,也可以用“device-width”和“device-height”把它设置成浏览器屏幕的大小。比如要把页面宽度固定到浏览器的屏幕上,防止出现横向滚动条就可以使用\r\n\r\n]]>\r\n  最后一个是指定是否允许用户自己缩放,也就是用户通过两个手指触屏来缩放的方式。默认都是允许的值为1,如果要禁止可以把它的值设置为0。就像下面这样\r\n\r\n]]>\r\n  设置了这个属性以后两个手指在屏幕上把它摸到高潮它也不会缩放。上面这些属性只要设置就可以让网页在Mobile设备下好好显示,我一般会禁止横向滚动条和用户缩放,就像下面这样\r\n\r\n]]>\r\n  最后一个是指定是否允许用户自己缩放,也就是用户通过两个手指触屏来缩放的方式。默认都是允许的值为1,如果要禁止可以把它的值设置为0。就像下面这样\r\n\r\n]]>\r\n  只要把他们用逗号隔开就可以了,不过有些浏览器不支持width和height设置固定数值(我这充话费送的破手机的默认浏览器就不支持)所以最好别用那个。
\r\n  其他也没啥啦,就是这样,喵~
\r\n  参考:
\r\n  https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag", "image": "fe5116f5fb4d25be1450f3bba6e431f3.gif", "create_at": "2013-02-16 22:47:05" }