4

当我尝试使 Web 应用程序响应屏幕尺寸时遇到问题。

我有我想用于智能手机（iPhone、Andriod、黑莓、Windows Phone）的 CSS，还有我想用于平板电脑的 CSS。

我的测试设备是 iPad 3 (768 x 1024) 和 blackberry 10 (768 x 1280)。并且宽度相同是一个问题，因为我的 css 以：

@media screen and (max-width:768px){
    //enter code here`code here
}

因为黑莓的分辨率稍好一些，所以它呈现了我不想使用的 CSS。我想还有另一种方法来检查媒体类型吗？我想知道是否有办法以可测量的距离（厘米或英寸）检查宽度。不知道如何解决这个问题。

提前致谢

4

3 回答 3

5

CSS 声明中使用的“像素”以及当浏览器报告客户端设备的屏幕尺寸时，与设备屏幕上的实际像素无关。CSS 中使用的“像素”本质上是专门为我们 Web 开发人员创建的抽象结构。对于大多数 Web 应用程序来说，关注高分辨率移动屏幕上真实像素的实际数量是完全没有必要的，只会让你发疯。

您可以通过检查navigator.userAgentJavaScript 中的属性来确定浏览器和设备类型。例如，要测试（实际上）任何移动设备：

 // if mobile === true, 99% chance the device is mobile.
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));

您当然可以检查navigator.userAgent以确定用户是否使用您特别关注或遇到问题的特定类型的设备或浏览器。

但同样，以我个人的经验，聪明、简单、灵活的响应式 CSS 设计（当然也支持媒体查询和 JavaScript）将在 99% 的设备/浏览器组合上呈现精美，而无需借助检查navigator.userAgent来创建不同的单个设备的样式。

于 2013-04-17T01:40:10.443 回答
2

您还可以将样式限制为高度：

@media screen and (max-width:768px) and (max-height:1024px){
    // iPAD
}
于 2013-04-17T01:19:12.757 回答
1

您应该在 html 标头中添加元标记视口：

<meta name="viewport" content="width=device-width, initial-scale=1">

总结一下 ：

宽度 = 设备宽度 x 像素密度

（银河 S4：1080 = 360 x 3）

此元标记允许您捕获设备宽度而不是“伪造的宽度”（360 而不是 1080）

一些很好的阅读：

于 2016-01-11T11:59:52.257 回答