更改应仅反映在平板设备中答案

【问题标题】：Changes should be reflect in only tablet devices更改应仅反映在平板设备中
【发布时间】：2012-04-13 23:06:59
【问题描述】：

我已将正文背景颜色（例如：蓝色）应用于我的页面。但是当我在平板电脑上打开这个页面时，移动设备的颜色应该变成橙色。当我调整我的电脑浏览器窗口的大小时，颜色不会改变。可能吗？

【问题讨论】：

标签： android-layout css tablet media-queries android

【解决方案1】：

你可以通过改变CSS标签来改变宽度；但这会在所有设备上发生变化。

@media only screen and (max-device-width: 1440px) {

要确定它是平板电脑还是用户具体使用的设备，您可以使用 Javascript 来确定设备。然后相应地加载 CSS。

你可以看这里的代码； [链接]http://davidwalsh.name/detect-ipad[/链接]

问题在于那里有成千上万的设备。所以你必须检查每台设备。

// For use within normal web clients 
var isiPad = navigator.userAgent.match(/iPad/i) != null;

// For use within iPad developer UIWebView
// Thanks to Andrew Hedges!
var ua = navigator.userAgent;
var isiPad = /iPad/i.test(ua) || /iPhone OS 3_1_2/i.test(ua) || /iPhone OS 3_2_2/i.test(ua);

【讨论】：

【解决方案2】：

您是否尝试过 CSS3 媒体查询？如下贴？

/*Common Tablet Width*/
@media only screen and (max-device-width: 1024px) {
    body{
       background-color:blue;
    }
}

【讨论】：

如果平板大于1024px 比如1280、1440……这样的东西我们怎么定义？