iPhoneのブラウザからデスクトップのCSSを隠すには？

私は2つのcssファイルを作成したWebページを持っています.1つはデスクトップブラウザ用、もう1つは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上で、私はいくつかの奇妙な行動を持って、それが見えます。 2行目（main.css）をコメントアウトすると、iphoneで正常に動作します。

どのように私はそれを隠すことができますか？ありがとう

出典

2011-01-19 Burjua

デフォルトのCSSがロードされていることを前提とすべきであると：それはiPhone上で正常に動作します（と他のスマートフォンのほとんど）とも我々の最愛IEとは別に、すべてのデスクトップブラウザで動作します:)だけ追加し、この問題を解決するためにmain.cssを変更/リセットする特定のルールをmobi.cssに追加してください - mediaクエリーも代替の可能性があります – Knu

[OK]を、私は解決策を発見し、それは実際には非常にシンプルで、メディアクエストを使用するだけです。このようなもの：

<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" />

ターゲットデバイスに応じて幅を変更することができます。その後、

<!--[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

"bunch of text"は完全に有効なメディアクエリです。 – Kalessin

新しいブラウザでは、iphoneがiPhone専用のものかどうかはわかりませんでした。 IMOはIEのためだけに作成していた開発者と同じです。 – plebksig

Mobile WebKitは、メディアタイプがscreenのスタイルシートを適用します。これは、モバイルブラウザではなく、モバイル用のいくつかのUI最適化を備えたデスクトップブラウザのように動作するためです。

さまざまなHTMLをiPhoneのようなブラウザに表示して、そのようにすることをお勧めします。私はモバイルWebKitからCSSを隠すための信頼できるHTMLやCSSベースの方法はないと思います。

出典

2011-01-19 18:37:45

他のCSSがまったく存在しないように、phpや別のサーバーサイドスクリプトでモバイル検出を使用します。ここで良いスクリプト

http://detectmobilebrowser.com/

スクリプトはリルを変更する必要があるに取得するための場所です。それはif statmentにあるので、それを関数に入れるとtrueまたはfalseを返すことができます。あなたはそれを好きなように使うことができます。

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

出典

2011-01-19 21:16:40

私はhttp://mobiforge.comからWHOISSTANの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を隠すには？

答えて

関連する問題