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

Question

当我尝试使网络应用响应屏幕尺寸时遇到问题。

我有我想用于智能手机(iPhone、Andriod、黑莓、Windows Phone)的 CSS，还有我想用于平板电脑的 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 开发人员创建的抽象结构。对于大多数 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 即可为各个设备创建不同样式的组合。