分辨率相关手机模板

问题描述：

我正在开发一个小手机页面，该页面应该只能用于移动设备。但它应该适合所有Android设备及其分辨率。分辨率相关手机模板

模板包括表和夫妇应在百分比收缩有关决议变化的比率图像

我基本上需要的是聪明的CSS代码提示，将审议该决议，并从几个挑我将创建不同的样式表。

答

可以使用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和具有在横向和纵向模式设备宽度320px。一些Android设备返回设备宽度480px。

在你的第二个方法，我怎么会去从分辨率到另一个的一个范围内做的范围。第一种方法的问题是，即使在iPhone中有2种不同的分辨率（iphone 4和3gs） – 2012-07-22 19:07:51

您不需要那样做。您的网页将被缩放以适应那些320px。阅读这篇文章得到的，我说什么更好的理解 - 一旦我加入了 Roman 2012-07-22 19:16:11

我所有的问题= “视口”内容=“WIDTH = 320”> 此设置视所有设备是为更多钞票的小，并允许较大的器件来拉伸视口，以适应它的需要感谢的文章花花公子它因子评分我这么多！ – 2012-07-24 17:53:40

分辨率相关手机模板

相关推荐