Question

我正在开发一个小型移动页面，该页面应该仅适用于移动设备。但它应该适合所有的Android＆amp; iPhone设备及其解决方案。

模板包括表格和一对图像，这些图像应按照分辨率变化的比率缩小百分比

我基本上需要的是智能CSS代码的提示，它将考虑分辨率，并将从我将创建的几个不同的样式表中选择。

Answer 1

您可以使用JS检测确切的设备并为其生成样式表链接。

//Detect mobile devices
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase())),

//Detect only iPhone
iphone = (/iphone/i.test(navigator.userAgent.toLowerCase()));

//Apply stylesheet for mobile devices
if(mobile){
   var cssLink = document.createElement("link");
   cssLink.setAttribute("type", "text/css");
   cssLink.setAttribute("rel", "stylesheet");
   cssLink.setAttribute("href", "css/mobile.css");
   document.head.appendChild(cssLink);
}

//Apply stylesheet for iPhone only
if(iphone){
   var cssLink = document.createElement("link");
   cssLink.setAttribute("type", "text/css");
   cssLink.setAttribute("rel", "stylesheet");
   cssLink.setAttribute("href", "css/mobile.css");
   document.head.appendChild(cssLink);
}

或使用媒体查询max-device-width检测所有移动设备：

@media only screen and (max-device-width: 480px) {
     /* CSS for mobile */
}

请注意，我将max-device-width设置为480px。这是因为移动设备屏幕测量，它在参考像素中，它比实际设备像素大。例如， iPhone 3 和 4 在横向和纵向模式下都具有设备宽度320px。某些 Android 设备会返回设备宽度480px。

分辨率依赖移动模板

1 个答案: