tru*_*ktr 11 iphone android cross-browser pixels
例如,默认情况下,如果不存在视口元标记,则iPhone和Androids将自动缩放页面以尝试使其非常适合框架.专为台式机设计的网站将被缩小,以便它们适合小视口,但显然像素并未真实地表示.
那么,如何在移动浏览器上显示完整尺寸的网页,以便"300px"在移动设备的屏幕上实际上以300个真实像素表示？
我知道meta视口方法,但是从目前为止我所知道的,当缩放设置为100%并且宽度设置为device_width时,在这种情况下使用的像素比为1.5或1.0,并且您可以检测移动设备正在渲染的像素比率.我似乎无法找到某种方法来明确强制设备仅使用1.0像素比率而不使用1.5像素比率.
如何让设备使用1.0的像素比率,以便CSS中定义的300"像素"实际渲染移动设备屏幕上的300像素？如何以实际尺寸显示网页,而不是像素比率为1.5？
编辑下午6:50 pm 10/24/2011:以下是我不想要的示例:目前,如果您使用元标记设置移动浏览器的视口属性,如下所示:
<meta name="viewport" content="width=device_display, initial-scale=1.0" />
然后这意味着移动浏览器将呈现页面几乎与页面设计完全一样,除了CSS中定义的每个"像素"实际上包含设备屏幕上的1.5像素,因此像素比率为1.5.设置这种1.5像素比率的惯例,使得设计在高分辨率设备上看起来不会太小.
我理解这一点,但我不希望这样.
我希望强制像素比率为1.0,我会以自己的方式处理高分辨率设备.如何在移动浏览器中强制使用1.0像素比率？
这是解释视口元标记和像素比率问题的信息.
此外,这里有一个技巧,允许您根据检测到的像素比率显示不同的图形,这不是我想要做的,但如果没有其他选项将会显示.
如何强制像素比率为1.0？
编辑11/3/2011 8:56 pm:任何人？
我不知道你会如何使用它，但我知道在 Webkit 中实现的媒体查询-webkit-device-pixel-ratio可以告诉你正在使用什么比率。Gecko 实现的最小和最大前缀被命名为min--moz-device-pixel-ratio和max--moz-device-pixel-ratio；但与 Webkit 实现的前缀相同的命名-webkit-min-device-pixel-ratio和-webkit-max-device-pixel-ratio
取自：https://developer.mozilla.org/en/CSS/Media_queries/。
另请考虑此链接：http://www.hanselman.com/blog/SupportingHighdpiPixeldenseRetinaDisplaysLikeIPhonesOrTheIPad3WithCSSOrIMG.aspx。我希望它有帮助。