android-layout - 更改应仅反映在平板设备中

Question

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

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

Answer 2

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

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