0

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

我已将这些代码与相关的 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。由于设备的屏幕宽度，在我的 android (samsung Galaxy y) 上测试此页面横向会阻止大部分设计。有没有办法添加另一个链接类型代码但针对 android 用户？甚至任何其他的iOS？

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

4

1 回答 1

0

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

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>的 s，然后让 JavaScript 添加它们。

于 2012-09-08T18:01:26.247 回答