Question

当我尝试制作响应屏幕尺寸的网络应用时，我遇到了问题。

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

我的测试设备是iPad 3（768 x 1024）和黑莓10（768 x 1280）。并且宽度相同是一个问题因为我的css以：

开头

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

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

提前致谢

Answer 1

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

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

 // 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为各个设备创建不同的样式。

Answer 2

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

@media screen and (max-width:768px) and (max-height:1024px){
    // iPAD
}

Answer 3

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

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

总结一下：

width =设备宽度x像素密度

（Galaxy S4：1080 = 360 x 3）

此metatag允许您捕获设备宽度而不是＆＃34;伪造宽度＆＃34; （360而不是1080）

一些好的阅读：

具有高分辨率智能手机和平板电脑的响应式CSS

3 个答案: