例如,默认情况下,如果不存在视口元标记,则iPhone和
Androids将自动缩放页面以尝试使其非常适合框架.专为桌面设计的网站将被缩小,以便它们适合小视口,但显然像素并未真实地表示.
那么,如何在移动浏览器上显示完整尺寸的网页,以便“300px”实际上在移动设备的屏幕上以300个真实像素表示?
我知道Meta视口方法,但是从目前为止我所知道的,当缩放设置为100%并且宽度设置为device_width时,在这种情况下使用的像素比为1.5或1.0,并且您可以检测移动设备正在渲染的像素比率.我似乎无法找到某种方法明确强制设备仅使用1.0像素比率而不使用1.5像素比率.
如何让设备使用1.0的像素比率,以便CSS中定义的300“像素”实际渲染移动设备屏幕上的300像素?如何以实际尺寸显示网页,而不是像素比率为1.5?
编辑2011年10月24日下午6:50:这是我不想要的一个例子:
目前,如果您使用元标记来设置移动浏览器的视口属性,如下所示:
<Meta name="viewport" content="width=device_display,initial-scale=1.0" />
然后这意味着移动浏览器将呈现页面几乎与页面设计完全一样,除了CSS中定义的每个“像素”实际上包含设备屏幕上的1.5像素,因此像素比率为1.5.设置这种1.5像素比率的惯例,使得设计在高分辨率设备上看起来不会太小.
我理解这一点,但在我的情况下,我不希望这样.
我希望强制像素比率为1.0,我会以自己的方式处理高分辨率设备.如何在移动浏览器中强制使用1.0像素比率?
Here’s the info解释了视口元标记和像素比例问题.
此外,here’s a trick允许您根据检测到的像素比率显示不同的图形,这不是我想要做的,但如果没有其他选项将会显示.
如何将像素比率强制为1.0?
编辑11/3/2011 8:56 pm:任何人?
解决方法
我不确定你会如何使用它,但我知道在Webkit中实现的媒体查询as -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.我希望它有所帮助.
取自: https://developer.mozilla.org/en/CSS/Media_queries/.
也请考虑以下链接: http://www.hanselman.com/blog/SupportingHighdpiPixeldenseRetinaDisplaysLikeIPhonesOrTheIPad3WithCSSOrIMG.aspx.我希望它有所帮助.