0

我正在开发一个应该只对移动设备可见的小型移动页面。但它应该适合所有 Android 和 iPhone 设备及其分辨率。

该模板包括表格和几张图像，这些图像应该相对于分辨率变化的比例缩小百分比

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

4

1 回答 1

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);
}

或使用 Media Query 检测所有移动设备max-device-width：

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

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

于 2012-07-22T18:49:55.443 回答