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

Question

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

我有css,我想用于智能手机(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开发人员创建的抽象结构.对于大多数网络应用来说,在高分辨率移动屏幕上关注自己的真实像素实际数量是完全没必要的,只会让你疯狂.

您可以通过navigator.userAgent在JavaScript中检查属性来确定浏览器和设备类型.例如,要测试(实际上)任何移动设备:

 // 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来创建不同的个人设备的样式.