Question

我目前在HTML文档中有以下内容。

<link REL=StyleSheet HREF="/stylesheets/home.css" TYPE="text/css" MEDIA=screen>
<link REL=StyleSheet HREF="/stylesheets/homedark.css" TYPE="text/css" MEDIA=handheld>

然而，手持设备（我的Android手机）没有任何变化。有什么我做错了，还是这不简单？

Answer 1

您需要使用更高级的媒体查询，例如定位screen size 的媒体查询

更像是

<link rel="stylesheet" href="/stylesheets/homedark.css" type="text/css" 
    media="screen and (max-device-width: 480px)">

在样式表中，它会是这样的

@media only screen and (max-device-width: 480px) {
    //Your styles here
}

http://www.w3.org/TR/css3-mediaqueries/

简单的JS设备检测可能会有所帮助：

if( navigator.userAgent.match(/Android/i) || 
    navigator.userAgent.match(/webOS/i) || 
    navigator.userAgent.match(/iPhone/i) || 
    navigator.userAgent.match(/iPod/i)){
     // link to stylesheet
}

更好的办法是使用某种组合...媒体查询＆amp;设备/功能检测。

这是一个很好的概述：http://www.csskarma.com/presentations/cssla/slides/mobile_media_touch.pdf（警告：pdf文件）

Answer 2

根据w3schools手机媒体类型无论如何都已弃用。您需要使用媒体查询来完成您想要的任务。

太糟糕了，没有＃34;手机＆＃34;的媒体类型。拨打号码的能力确实是最显着的差异。

Answer 3

根据W3C对该术语使用的任何标准，也许您的手机不认为自己是手持设备。现代移动浏览器与完整的桌面移动浏览器并没有什么不同，并且远不及哑铃手机中的原始（无用）WAP浏览器那样有限。通常没有必要输出“手持”类型，因为手机浏览器更擅长决定显示内容的内容和方式。

如何为HTML Link标记的手持设备使用Media属性？

3 个答案: