Question

我已将身体背景颜色（例如：蓝色）应用到我的页面。但是当我在平板电脑，移动设备中打开此页面时，颜色应该变为橙色。当我调整我的PC浏览器窗口时，颜色不会改变。可能吗？

Answer 1

您可以通过更改CSS标记来更改宽度;但是这会在所有设备上发生变化。

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

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

你可以在这里查看代码; [链接] http://davidwalsh.name/detect-ipad [/ link]

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

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

更改应仅反映在平板电脑设备中

2 个答案: