如何从iphone浏览器隐藏桌面css？

我有一个网页，我做了两个css文件，一个用于桌面浏览器，另一个用于iphone。我做这样的事情：如何从iphone浏览器隐藏桌面css？

<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上正常工作。

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

来源

2011-01-19 Burjua

你应该假设默认的CSS加载，然后在mobi.css中添加修改/重置main.css的特定规则 - 媒体查询也可以替代 – Knu 2011-01-19 18:28:32

好吧，我发现了一个解决方案，它其实很简单，只需要使用媒体查询。事情是这样的：

<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]-->

来源

2011-01-26 10:45:42 Burjua

你应该让mobi.css在main.css之上应用手持式样式。另外，我猜媒体应该是mobi.css的掌上电脑，而不是像现在一样的一堆文本。

来源

2011-01-19 18:31:41 plebksig

“一堆文本”是一个完全有效的媒体查询。 – Kalessin 2011-01-19 20:15:48

移动的WebKit应用与screen媒体类型的样式表，因为它旨在表现得像与移动一些UI的优化，而不是作为一个手机浏览器桌面浏览器。

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

来源

2011-01-19 18:37:45

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

http://detectmobilebrowser.com/

剧本需要修改一个可爱的地方。它有一个if的陈述，所以如果你把它放在一个函数中，你可以返回一个true或false。然后你可以使用它。

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

来源

2011-01-19 21:16:40

我包括来自http://mobiforge.comWHOISSTAN的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 
    } ?>

来源

2011-01-20 22:56:33 Tobias

如何从iphone浏览器隐藏桌面css？

回答

相关问题