拿到一个网页,需要将其缩小显示。因此用了viewport。但是viewport标签无效。因为网页用的是绝对布局position:absolute;
viewport:
<meta name="viewport" content="width=768, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no">

参考:http://craigsworks.com/projects/forums/showthread.php?tid=3242

Good to know viewport and absolute position don't work in tandem though!

OK,然后在IPad上测试,是可以缩放的。在PC上不行,即使用了代理useragent。

ipad浏览器以及webview控件(safari核心)的分辨率与DPI无关,都是768*1024。因此一份设计成高清的1536*2048的网页,在ipad4的浏览器上显示,依然是按照768来显示的。如果设置initial-scale=1.0,也只会显示1/4内容。
另外,meta 标签是逐行执行的。后面的会替换前面的meta。
例如一个web有2行viewport,会按照第二个的来显示。
<meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=0.5, minimum-scale=0.5, user-scalable=no">
<meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0, minimum-scale=0.5, user-scalable=no">

第二行放在html标签之外也可以。

最佳答案

评论() 相关

收藏

赞

mochong

ThinkPHP 是一个免费开源的,快速、简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。