使Android元视口缩放感觉：我错过了什么？
我一直在试图确定viewport和内部的内容如何受到用于使用WebView或本地浏览器绘制内容的视口元标记的影响。
我碰到的是一些明显的不一致。 我创build了一个小的页面（见下文）与图像和一些JavaScript来显示视口的大小，所以我可以直观地看到图像的缩放以及获取确切的数字。
首先，一些观察：
- 没有一个视口的宽度数字是我所期望的，只是接近。
- 当数字接近设备像素数量时，绘图实际上是一对一完成的，或者至less是可见的。
- 如果页面大小（文档大小）低于视口大小，则视口数字将缩小。 也就是说，视口不一定代表最大可能的可见空间 – 只是当前的可见空间。
- 同样，在本地浏览器中，视口大小由顶部栏进行调整。 滚动屏幕时，尺寸会增加。 给出的数字是全屏显示。
设备＃1：物理屏幕是1024×600，它运行的是Android 2.2。
- initial-scale = 1.0 => 676×400
- initial-scale = 1.0，width = device-width => 676×400
- initial-scale = 2，width = device-width => 338×200
- initial-scale = 2，width = device-width，target-densitydpi = device-dpi => 507×300
- initial-scale = 0.5，width = device-width，target-densitydpi = device-dpi => 800×473
- initial-scale = 0.9，width = device-width，target-densitydpi = device-dpi => 800×473
- width = device-width，target-densitydpi = device-dpi => 1014×600
- initial-scale = 1.0，width = device-width，target-densitydpi = device-dpi => 1014×600
- initial-scale = 0.5，width = device-width，target-densitydpi = device-dpi，minimum-scale = 0.1 => 2028×768
- initial-scale = 0.5，width = device-width，target-densitydpi = device-dpi，minimum-scale = 0.1，user-scalable = no => 1014×600
设备＃2：物理屏幕是800×480，它运行Android 2.3.2。
- 初始尺度= 1.0 => 527×320
- initial-scale = 1.0，width = device-width => 527×320
- initial-scale = 2，width = device-width => 263×160
- initial-scale = 2，width = device-width，target-densitydpi = device-dpi => 395×240
- initial-scale = 0.5，width = device-width，target-densitydpi = device-dpi => 790×480
- initial-scale = 1.0，width = device-width，target-densitydpi = device-dpi => 790×480
- initial-scale = 0.5，width = device-width，target-densitydpi = device-dpi，minimum-scale = 0.1 => 1580×768
- initial-scale = 0.5，width = device-width，target-densitydpi = device-dpi，minimum-scale = 0.1，user-scalable = no => 790×480
- width = 1580，target-densitydpi = device-dpi => 790×480
- width = 1580，target-densitydpi = device-dpi => 790×480
- width = 1580，target-densitydpi = device-dpi，minimum-scale = 0.1 => 790×480
这些结果中，以下几点是没有意义的：
- 设备＃1，项目5,6和10
- 设备＃2，项目5,8,10,11,12
有没有人知道那些没有意义的事情呢？
有谁知道为什么许多值是10像素害羞匹配的物理像素，但结果就好像他们匹配？ （例如1.7和2.6）
我做错了什么，或者看起来不可能缩小到1.0以外，除非用户也被允许缩放并设置最小比例值？
也就是说，即使有效值是0.01到10，除非您还可以设置最小比例，否则忽略1.0以下的初始比例值。
Android文档在用户可扩展性不是最小/最大比例值被忽略的时候会说。 这似乎不是很有用。 而2.9-2.11似乎表明，你不能自己计算，并设置宽度。
最后，我正在使用的HTML：
<html> <script src="jquery-1.4.4.js"></script> <head> <meta name="viewport" content="initial-scale=0.5, width=device-width, target-densitydpi=device-dpi, minimum-scale=0.1, user-scalable=no" /> </head> <body style="margin:0;"> <div id="bld" class="bld" style="position:absolute; width:250px; height:125px; left:50px; background-color:#ccccff;">Hello world.</div> <img id="bl1" src="http://commondatastorage.googleapis.com/kf6nvrhttp://img.dovov.com1024x768.png" /> <script> $("#bl1").click(function(){ var pageWidth = $(document).width(); var pageHeight = $(document).height(); var viewportWidth = $(window).width(); var viewportHeight = $(window).height(); $("#bld").html("Page width: "+pageWidth+"<br />pageHeight: "+pageHeight+"<br />port width: "+viewportWidth+"<br />port height: "+viewportHeight); }); </script> </body> </html> 所以…我错过了什么？
有趣的蠕虫你可以在那里打开。 当你尝试更多的设备，你可能会看到更多的怪异和随机的错误。 有趣的时刻！ 🙂
我怀疑你可能想放弃的某个地方，试着去…
- 坚持尽可能简单的设置。
- 接受设备select报告的像素宽度。
- 依靠自适应/stream体布局和相对宽度，使事情跨越不同的屏幕宽度。
- 使用原生CSS属性进行圆angular，阴影和渐变的分辨率中性渲染。
- 尽可能使用vector格式（SVG，图标字体等）
- 和（ 重要的 ）使用高分辨率的
border-image以及background-image加上良好支持的background-size属性 1使事情变得更好和更清晰2 。
1）为了向旧的浏览器（如MSIE8）提供向后兼容性，您需要使用双重background-image声明，如：
background-image: url(low-res.png); /* CSS2 */ background-image: url(high-res.png), none; /* CSS3 */ background-size: 100px 10px; /* CSS3 */
2） -webkit-max-device-pixel-ratio媒体查询也可能有所帮助，但顾名思义它只适用于webkit浏览器。
漫谈：
新一代的Android和iOS设备具有不同的屏幕DPI，他们已经采用了报告CSS像素而不是实际的设备像素。 这是好的或坏的 – 取决于你如何看待它。
这是不好的，因为你不能保证你已经习惯了的设备像素控制，使用大多数同质的屏幕。
另一方面，这是很好的，因为你知道你的devise永远不会变得如此之小以至于不能被普通人阅读/使用。
使用target-densitydpi=device-dpi的问题在于它在7 target-densitydpi=device-dpi宽的800 target-densitydpi=device-dpi屏幕上运行奇迹，它会在4 target-densitydpi=device-dpi宽的960 target-densitydpi=device-dpi屏幕上完全毁掉您的应用程序。
$(document).ready(function() { $('meta[name=viewport]').attr('content','width=1024, user-scalable=no'); });
似乎在正确的缩放应用后禁用用户缩放
