Question

我正在构建网站的移动版本（不是mobile.domain.com），而只是根据设备提供不同的样式表。

所以我有这样的事情：

<link href="css/style.css" media="screen" rel="stylesheet"/>
    <link href="css/mobile1.css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css" />
    <meta name="viewport" content="width = 320px, initial-scale=1" />

我的移动样式表显然只隐藏/显示我想要的移动网站，然后覆盖style.css中的类/样式。

我遇到的问题是我似乎找不到什么样的风格我不会压倒一切。这意味着，如果我完全删除 style.css - 该网站看起来很完美。如果我保持 style.css，那看起来就不那么完美了。

有没有办法让我在页面加载时动态删除style.css？

或者我是以完全错误的方式解决这个问题。

Answer 1

我最后只是给我的样式表一个ID，然后这样做了：

jQuery('#mainStyleSheet').remove();

我检查了屏幕尺寸后做了这个。如果小于480，那么我删除旧样式表。似乎工作得很好 - 不确定它是一个理想的解决方案。

Answer 2

此示例适用于Internet Explorer，但您必须找到适合iPhone的呼叫名称：

<!--[if !IE]> //This will target everything except Internet Explorer browsers.
    <link rel="stylesheet" type="text/css" href="style.css"> //Add appropriate stylesheet.
<![endif]-->

<!--[if !iPhone]>
    ...
<![endif]-->

可以工作。我不确定，也没有iPhone可以检查这个。

你能删除某个设备的样式表吗？

2 个答案: