Question

我正在创建我的网站的移动版本。

我已将这些代码与屏幕尺寸的相关css一起使用：

<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="phone.css" /> <link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="pad.css" />

现在这些css代码适用于iphone，ipod touch甚至ipad。在我的机器人（三星Galaxy y）上进行测试，由于设备的屏幕宽度，翻转页面横向遮挡了大部分设计。有没有办法添加另一个链接类型代码，但针对Android用户？或者甚至是其他任何ios？

所以我可以将它们的代码更改为auto以适合它运行的所有设备？（注意我知道可以选择自动使用上面列出的2 css然后才会说明。但它看起来不正确，因此我想要第三个css页面。）

Answer 1

我不知道我是否正确理解了您的问题，但如果我这样做了，应该这样做：

var userAgent = navigator.userAgent.toLowerCase(); //get the user agent
var android = (userAgent.indexOf("android") != -1);
if(android) { //if client is running Android
    document.head.innerHTML += "<link.../>"; //add an Android-specific stylesheet
}
else {
    document.head.innerHTML += "<link.../>"; //use the regular stylesheet otherwise
}

注意：您最初必须删除<link>，然后让JavaScript添加它们。

为android分开css样式

1 个答案: