How to hide desktop css from iphone browser?
I have a web page for which I made two css files, one for desktop browser and another for iphone. I do it something like this:
<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)" />
On a desktop it works fine, but on iphone I Have some strange behavior, it looks like it loads both files and rules conflict with each other. If I comm开发者_开发问答ent out second line (main.css) it works fine on iphone.
so how can I hide it? thanks
I included WHOISSTAN's php function example from http://mobiforge.com:
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']));
}
Then I added this within my <HEAD></HEAD> tags:
<?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
} ?>
use mobile detection in php or another server side script so that the other css is not there at all. here is a place to get a good script
http://detectmobilebrowser.com/
the script needs to be modified a lil. it comes in a if statment so if you put it in a function you can return a true or false. Then you can use it like.
if(mobiDetect()){
<link href="mobiStyle.css" />
}else{
<link href="style.css" />
}
You should let mobi.css apply handheld styles on top of main.css. Also, I guess media should be handheld for mobi.css, and not a bunch of text like you have now.
Mobile WebKit applies stylesheets with media type of screen, because it’s meant to behave like a desktop browser with some UI optimisations for mobile, rather than as a mobile browser.
You might consider serving different HTML to iPhone-like browsers, get around it that way. I don’t think there’s any reliable HTML- or CSS-based way to hide CSS from Mobile WebKit.
Ok, I found a solution and it is actually quite simple, just need to use media querys. Something like this:
<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" />
We can change width depending on target device. It works fine on iphone (and most of other smartphones) and also works in all desktop browsers apart from our beloved IE:) to fix this issue just add:
<!--[if IE]>
<link rel="stylesheet" href="css/main.css" media="all" />
<![endif]-->
加载中,请稍侯......
精彩评论