如何从 iPhone 浏览器中隐藏桌面 CSS？答案

【问题标题】：How to hide desktop css from iphone browser?如何从 iPhone 浏览器中隐藏桌面 CSS？
【发布时间】：2011-01-26 18:45:42
【问题描述】：

我有一个网页，我为它制作了两个 css 文件，一个用于桌面浏览器，另一个用于 iphone。我这样做是这样的：

<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="/css/main.css" media="screen,projection,print" />
<link rel="stylesheet" href="/css/mobi.css" type="text/css" media="only screen and (max-device-width: 480px)" />

在桌面上它工作正常，但在 iphone 上我有一些奇怪的行为，看起来它加载文件和规则相互冲突。如果我注释掉第二行（main.css），它可以在 iphone 上正常工作。

那么我该如何隐藏它呢？谢谢

【问题讨论】：

您应该假设默认 css 已加载，然后在 mobi.css 中添加修改/重置 main.css 的特定规则 - 媒体查询也可以是一种替代方法

标签： iphone css browser safari

【解决方案1】：

我包含了来自http://mobiforge.com的WHOISTAN的php函数示例：

function is_mobile(){
    $regex_match="/(nokia|iphone|android|motorola|^mot\-|softbank|foma|docomo|kddi|up\.browser|up\.link|";
    $regex_match.="htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|";
    $regex_match.="blackberry|alcatel|amoi|ktouch|nexian|samsung|^sam\-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|maui|";    
    $regex_match.="symbian|smartphone|midp|wap|phone|windows ce|iemobile|^spice|^bird|^zte\-|longcos|pantech|gionee|^sie\-|portalmmm|";
    $regex_match.="jig\s browser|hiptop|^ucweb|^benq|haier|^lct|opera\s*mobi|opera\*mini|320x320|240x320|176x220";
    $regex_match.=")/i";        
    return isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE']) or preg_match($regex_match, strtolower($_SERVER['HTTP_USER_AGENT']));
}

然后我在我的<HEAD></HEAD> 标签中添加了这个：

<?php
    if(is_mobile()) {
        ?><link rel="stylesheet" href="mobi.css" type="text/css" media="handheld" /> <?php 
    } else { 
        ?> <link rel="stylesheet" href="main.css" type="text/css" media="screen" /> <?php
    } ?>

【讨论】：

【解决方案2】：

在 php 或其他服务器端脚本中使用移动检测，以便其他 css 根本不存在。这里是获得好剧本的地方

http://detectmobilebrowser.com/

脚本需要修改一下。它有一个if 语句，所以如果你把它放在一个函数中，你可以返回一个true 或false。然后你就可以像这样使用它了。

if(mobiDetect()){
 <link href="mobiStyle.css" />
}else{
 <link href="style.css" />
}

【讨论】：

【解决方案3】：

您应该让 mobi.css 在 main.css 之上应用手持样式。另外，我想对于 mobi.css 来说媒体应该是手持的，而不是像现在这样的一堆文本。

【讨论】：

“一堆文本”是一个完全有效的媒体查询。
是的，对于新浏览器，我不确定 iphone 是否仅指特定于 iphone。 IMO 等于过去只为 IE 制作的开发人员。

【解决方案4】：

Mobile WebKit 应用媒体类型为 screen 的样式表，因为它的行为类似于桌面浏览器，并针对移动设备进行了一些 UI 优化，而不是作为移动浏览器。

您可能会考虑为类似 iPhone 的浏览器提供不同的 HTML，以这种方式绕过它。我认为没有任何可靠的基于 HTML 或 CSS 的方法可以从 Mobile WebKit 中隐藏 CSS。

【讨论】：

【解决方案5】：

好的，我找到了一个解决方案，其实很简单，只需要使用媒体查询。像这样的：

<link rel='stylesheet' media='screen and (max-width: 480px)' href='css/mobi.css' />
<link rel='stylesheet' media='screen and (min-width: 481px)' href='css/main.css' />

<meta name="viewport" content="width=device-width" />
<meta name="HandheldFriendly" content="true" />

我们可以根据目标设备改变宽度。它在 iphone（和大多数其他智能手机）上运行良好，也适用于除了我们心爱的 IE 之外的所有桌面浏览器:) 解决这个问题只需添加：

<!--[if IE]>
    <link rel="stylesheet" href="css/main.css" media="all" />
<![endif]-->

【讨论】：