针对桌面和移动设备的替代 CSS 文件有一个技巧。在 HTML header 中实现如下:
<head>
<meta name="viewport" content="width=320" />
<link rel="stylesheet" href="mobile.css" type="text/css" media="only screen and (max-device-width: 480px)"/>
<link rel="stylesheet" href="desktop.css" type="text/css" media="screen and (min-device-width: 481px)"/>
<link rel="stylesheet" href="mobile.css" type="text/css" media="handheld"/>
<!--[if IE]>
<link rel="stylesheet" href="desktop.css" media="screen" type="text/css" />
<![endif]-->
</head>
然后,如果您需要移动设备和桌面设备的替代内容,请随意使部分 HTML 在桌面设备上可见并在移动设备设备上隐藏,反之亦然。
已在 iPhone 和 Android 上尝试过。请注意,只需在 ref 标记或 CSS 文件中指定“media="handheld"”即可not做把戏; iPhone 并不认为自己是手持设备。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)