如何從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？

回答

相關問題