Javascript 分辨率相关移动模板

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

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

---

<> P>我需要的是智能CSS代码的提示，它将考虑分辨率，并从我创建的两个不同样式表中挑选。

< P>您可以使用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 only screen and (max-device-width: 480px) {
     /* CSS for mobile */
}

请注意，我将

max device width

设置为

480px

。这是因为移动设备的屏幕测量，它是在参考像素中，比实际设备像素大。

---

例如，iPhone3和4在横向和纵向模式下都具有设备宽度

320px

。一些Android设备返回设备宽度

480px

在第二种方法中，我将如何处理从一个分辨率范围到另一个分辨率范围的范围。第一种方法的问题是，即使在iphone中，也有两种不同的分辨率（iPhone4和3gs），您不需要这样做。您的网页将被缩放以适应那些320px。阅读这篇文章以更好地理解我所说的内容-我所有的问题都解决了，因为我添加了“将所有设备的视口设置为尽可能小，并允许更大的设备拉伸视口以满足其需要”这篇文章感谢dude it Tough我这么多！