本文探讨了viewport在iOS、Android和Windows Phone设备上的不同表现，包括默认宽度、width设置的效果以及user-scalable属性的兼容性问题。作者指出，iOS会根据设置的width调整dpi，而Android则依赖target-densitydpi。在不同设备上，viewport的设置可能导致页面缩放和布局变化，尤其是在横竖屏切换时。为确保跨平台一致性，开发者需要仔细考虑viewport的配置。
viewport并非只是ios上的独有属性，在android、winphone上同样也有viewport。它们要解决的问题是相同的，即无视设备的真实分辨率，直接通过dpi，在物理尺寸和浏览器之间重设分辨率，这个分辨率和设备的分辨率无关。比如，你拿个3.5寸-320
* 480的iphone3 gs、3.5寸-640 *
960的iphone4或者9.7寸-1024*768的ipad2，虽然设备的分辨率不同,物理尺寸也不同，但你可以通过设置viewport让它们在浏览器里有相同的分辨率。比如说，你的网站是800px宽，你可以通过设置viewport的width=800，来让你的网站在这三个不同的设备上都刚好满屏显示你的网站。
以上的知识，相信每个对viewport稍有了解的同学应该都已经了解了。这不是我今天想说的重点。我想说明的是viewport在ios和android上的一些差异表现。
网上一搜关于viewport的知识，基本上全都是如下信息：
这段代码的意思是，让viewport的宽度等于物理设备上的真实分辨率，不允许用户缩放。一都主流的web
app都是这么设置的，它的作用其实是故意舍弃viewport，不缩放页面，这样dpi肯定和设备上的真实分辨率是一样的，不做任何缩放，网页会因此显得更高细腻。玩ps的同学应该都知道，当你将一张1000
* 1000的图片直接缩放至500 * 500分变成什么样，对吧？图片的失真一定逃不掉。
但我要做的一个应用却恰恰相反，需要利用viewport，利用缩放。不论真实分辨率是多少，无论物理尺寸是多少，我都希望在浏览器里
最低0.47元/天 解锁文章
扫一扫
1067
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
