使得Android的荟萃视口比例感：我在想什么？ [英] Making Sense of Android meta-viewport scaling: What am I missing?

问题描述

我一直在努力，以确定如何视口 - 以及其中的内容 - 受用于与web视图或在本地浏览器绘制内容视meta标签

I have been trying to determine how the viewport -- and the contents within -- are affected by the viewport meta tag used for drawing content with WebView or with the native browser.

我已经在运行一些明显的矛盾。我创建了一个小页面（见下文），用图像和一些JavaScript来显示视口大小，所以我可以直观地看到的图像缩放，以及得到确切的数字。

What I have run in to are some apparent inconsistencies. I created a small page (see below) with an image and some javascript for displaying the viewport size so I can visually see the scaling with the image as well as get the exact numbers.

首先，一些意见：

1. 无视口宽度的数字正是我所期待的，只是接近。
2. 在当前的数字是靠近器件像素数，图形实际上是做了一个换一 - 或至少是明显看起来是这样
。
3. 如果页面大小（文件的大小）是根据视口的大小，视数字缩水。即，视口并不总是一定重新present最大可能可见空间 - 仅仅是当前可见空间
4. 同样，在本机浏览器，视口大小由最上面一栏调整。尺寸增加了，因为它滚动在屏幕上。给出的数字是全屏显示。

设备＃1：物理屏幕是1024×600，它的运行Android 2.2

Device #1: Physical screen is 1024x600 and it's running Android 2.2.

1. 初始规模= 1.0 => 676x400
2. 初始规模= 1.0，宽=设备宽度=> 676x400
3. 初始规模= 2，宽度=设备宽度=> 338x200
4. 初始规模= 2，宽度=设备宽度，目标densitydpi =设备DPI => 507x300
5. 初始规模= 0.5，宽=设备宽度， 目标densitydpi =设备DPI => 800x473
6. 初始规模= 0.9，宽=设备宽度， 目标densitydpi =设备DPI => 800x473
7. 在宽度=设备宽度，目标densitydpi =设备DPI => 1014x600
8. 初始规模= 1.0，宽=设备宽度， 目标densitydpi =设备DPI => 1014x600
9. 初始规模= 0.5，宽=设备宽度， 目标densitydpi =设备DPI，最小规模= 0.1 => 2028x768
10. 初始规模= 0.5，宽=设备宽度， 目标densitydpi =设备DPI，最小规模= 0.1，用户可扩展性=无=> 1014x600

1. initial-scale=1.0 => 676x400
2. initial-scale=1.0, width=device-width => 676x400
3. initial-scale=2, width=device-width => 338x200
4. initial-scale=2, width=device-width, target-densitydpi=device-dpi => 507x300
5. initial-scale=0.5, width=device-width, target-densitydpi=device-dpi => 800x473
6. initial-scale=0.9, width=device-width, target-densitydpi=device-dpi => 800x473
7. width=device-width, target-densitydpi=device-dpi => 1014x600
8. initial-scale=1.0, width=device-width, target-densitydpi=device-dpi => 1014x600
9. initial-scale=0.5, width=device-width, target-densitydpi=device-dpi, minimum-scale=0.1 => 2028x768
10. initial-scale=0.5, width=device-width, target-densitydpi=device-dpi, minimum-scale=0.1, user-scalable=no => 1014x600

设备＃2：物理屏幕是800×480，它的运行Android 2.3.2

Device #2: Physical screen is 800x480 and it's running Android 2.3.2.

1. 初始规模= 1.0 => 527x320
2. 初始规模= 1.0，宽=设备宽度=> 527x320
3. 初始规模= 2，宽度=设备宽度=> 263x160
4. 初始规模= 2，宽度=设备宽度，目标densitydpi =设备DPI => 395x240
5. 初始规模= 0.5，宽=设备宽度， 目标densitydpi =设备DPI => 790x480
6. 初始规模= 1.0，宽=设备宽度， 目标densitydpi =设备DPI => 790x480
7. 初始规模= 0.5，宽=设备宽度， 目标densitydpi =设备DPI，最小规模= 0.1 => 1580x768
8. 初始规模= 0.5，宽=设备宽度， 目标densitydpi =设备DPI，最小规模= 0.1，用户可扩展性=无=> 790x480
9. 在宽= 1580，目标densitydpi =设备DPI =＆GT; 790x480
10. 在宽= 1580，目标densitydpi =设备DPI =＆GT; 790x480
11. 在宽= 1580，目标densitydpi =设备DPI，最小规模= 0.1 =＆GT; 790x480
    

1. initial-scale=1.0 => 527x320
2. initial-scale=1.0, width=device-width => 527x320
3. initial-scale=2, width=device-width => 263x160
4. initial-scale=2, width=device-width, target-densitydpi=device-dpi => 395x240
5. initial-scale=0.5, width=device-width, target-densitydpi=device-dpi => 790x480
6. initial-scale=1.0, width=device-width, target-densitydpi=device-dpi => 790x480
7. initial-scale=0.5, width=device-width, target-densitydpi=device-dpi, minimum-scale=0.1 => 1580x768
8. initial-scale=0.5, width=device-width, target-densitydpi=device-dpi, minimum-scale=0.1, user-scalable=no => 790x480
9. width=1580, target-densitydpi=device-dpi => 790x480
10. width=1580, target-densitydpi=device-dpi => 790x480
11. width=1580, target-densitydpi=device-dpi, minimum-scale=0.1 =>790x480
    

这些结果，以下是没有意义的：

Of these results, the following don't make sense:

1. 设备＃1，项目5和6，和10
2. 设备＃2，项目5 8，10，11，12

有谁知道什么是与那些没有意义的事？

Does anyone know what's going on with those that don't make sense?

有谁知道为什么很多的值是10个像素害羞匹配物理像素，但结果是，如果他们匹配？ （例如1.7和2.6）

Does anyone know why many of the values are 10 pixels shy of match the physical pixels, but that result is as if they match? (e.g. 1.7 and 2.6)

难道我做错了什么，或者它看来，这是不可能的缩小超过1.0除非用户也允许扩展和最小刻度值设定？

Am I doing something wrong, or does it appear that it's impossible to zoom out beyond 1.0 unless the user is also allowed to scale and the minimum-scale value is set?

也就是说，即使有效值为0.01到10，在1.0的初始规模的值将被忽略，除非你还可以设置最小刻度。

That is, even though the valid values are 0.01 to 10, initial-scale values under 1.0 are ignored unless you can also set the minimum scale.

href="http://developer.android.com/guide/webapps/targeting.html"> Android的文档做说，当用户可扩展性是没有的最小/最大刻度值的

The Android docs do say when user-scalable is no that the min/max scale values are ignored. That doesn't seem very useful. And 2.9-2.11 seem to show that you can't just calculate it yourself and set the width.

最后，我使用的HTML：

Finally, the HTML I'm using:

<html>
<script src="http://code.jquery.com/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/kf6nvr/images/1024x768.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>

所以......我缺少什么？

So... what am I missing?

推荐答案

您已经打开了有虫子的有趣即可。当你尝试更多的设备，你可能会看到更多的怪事，和随机错误。有趣的时光！ ： - ）

Interesting can of worms you've opened up there. As you try out more devices you'll probably see even more weirdness, and random bugs. Interesting times! :-)

我怀疑，在这条线，你可能想放弃了，只是尽量...

I suspect that somewhere down the line you might want to give up, and just try to...

• 在坚持使用简单的设置越好。
• 在接受像素宽度的设备选择报告。
• 在依靠自适应/流体布局和相对宽度，使事情在不同的屏幕宽度的工作。
• 使用本地的CSS属性为圆角，阴影和渐变色的分辨率中性渲染。
• 使用矢量格式（SVG，图标，字体等）尽可能
• 和（重要）使用高分辨率边框图片取值以及背景图像 s ^再加上很好的支持<一href="http://www.w3.org/TR/2002/WD-css3-background-20020802/#background-size"><$c$c>background-size物业 ¹ 使事情呈现漂亮和清晰的 ² 。

• Stick with as simple settings as possible.
• Accept the pixel width the device chooses to report.
• Rely on adaptive/fluid layout and relative widths to make things work across different screen widths.
• Use native CSS properties for a resolution neutral rendering of rounded corners, shadows and gradients.
• Use vector formats (svg, icon-fonts, etc.) as much as possible
• and (important) Use high-res border-images as well as background-images coupled with the well-supported background-size property¹ to make things render nice and crisp².

^1）为了提供向后兼容旧的浏览器（如MSIE8），你需要用双背景图像的声明 - 这样的：

¹⁾ To provide backwards compatibility to older browsers (like MSIE8) you'll need to use double background-image declarations - like:

background-image: url(low-res.png);        /* CSS2 */
background-image: url(high-res.png), none; /* CSS3 */
background-size:  100px 10px;             /* CSS3 */

^2）的<一个href="http://designby$c$c.tumblr.com/post/1127120282/pixel-perfect-android-web-ui"><$c$c>-webkit-max-device-pixel-ratio媒体查询还可以帮助，但顾名思义它仅适用于webkit的浏览器。

²⁾ The -webkit-max-device-pixel-ratio media query may also help, but as the name implies it only works for webkit browsers.

漫谈：

新一代的Andr​​oid和iOS设备有，他们已经使出报告 CSS像素，而不是这种不同的屏幕的DPI实际设备像素。这既是好还是坏 - 这取决于你如何看待它

The new generation Android and iOS devices have such varying screen DPIs that they've resorted to reporting CSS pixels rather than actual device pixels. This is both good or bad - depending on how you look at it.

这是坏，因为你不能保证再向下到该设备像素控制你习惯了，与昔日的多为均匀的屏幕工作。

It's bad because you're not guaranteed anymore the down-to-the-device-pixel control you were used to having, working with the mostly homogenous screens of yore.

在另一方面，它的好，因为你知道你的设计永远不会呈现如此的渺小，他们无法读取/使用普通人类。

On the other hand, it's good because you know your designs will never render so tiny that they can't be read/used by regular humans.

使用目标densitydpi =设备DPI 的问题是它，而它的工作原理奇观7寸宽800px屏幕上，它会完全毁掉你的应用程序在一个4英寸宽960px屏幕。

The problem with using target-densitydpi=device-dpi is that it while it works wonders on a 7inch wide 800px screen, it will completely ruin your application on a 4inch wide 960px screen.

这篇关于使得Android的荟萃视口比例感：我在想什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！