本文介绍了支持Retina的设备上的媒体查询的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

Javascript告诉我,我的Galaxy S3的屏幕分辨率为720x1280
但是文档报告为360x567。

Javascript tells me that my Galaxy S3 has a screen resolution of 720x1280But the document is reported as 360x567.

可以获取文档以更准确地反映屏幕分辨率?在视口上的初始尺度可能?

Is it possible to get the document to more accurately reflect the screen resolution? Initial-scale on the viewport perhaps?

我似乎无法管理它!

为了说明,我知道我的设备分辨率在纵向模式下为720像素宽,但是当在网页上放置元素时,元素会填充宽度为360像素的宽度,因为设备正在使用每个css像素有2个硬件像素。

To clarify, I know my device resolution is 720px wide in portrait mode, however when putting an element on a webpage the element fills the width of the page at 360px wide because the device is using 2 hardware pixels for each css pixel. Can I stop the device from doing this?

推荐答案

首先,为什么不在大多数时间使用这些信息关于的Quirksmode

First, why not to use that information most of the time (from PPK at Quirksmode about devicePixelRatio)

其次,当你仍然想要特别定位高分辨率设备(Apple称为Retina)时,应该阅读,其中最短的片段为:

Second, when you still want to target specifically high resolution devices (called Retina by Apple), you should read Cross Browser Retina/High Resolution Media Queries where the shortest snippet is:

@media 
  only screen and (-webkit-min-device-pixel-ratio: 2), 
  only screen and (min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

但还有其他人,还链接到3个有趣的文章和有关Windows Phone,Opera Mini,Firefox OS和现有的不同比率的更新

but there are others and also links to 3 previous interesting articles and updates about Windows Phone, Opera Mini, Firefox OS and different ratios that now exist

这篇关于支持Retina的设备上的媒体查询的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-27 15:52