レスポンシブルデザインがモバイルからズームアウトされていない[@mediaクエリ]

これは初めてのことですが、なぜこれが起こっているのか、どうやってこれを解決するのか分かりません。レスポンシブルデザインがモバイルからズームアウトされていない[@mediaクエリ]

@mediaのクエリを使用してウェブサイトをモバイルフレンドリーに構築しています。モバイルからサイトにアクセスしているときは、モバイル向けのバージョンが表示されますが、デスクトップビューに切り替えようとするとモバイルフレンドリーバージョンが残り、デスクトップ（通常）が表示されません。

次のように私は私の*の.cssファイルで

：私はいくつかのいずれかは、それがかもしれないと思うだろう念のために、すべてのブラウザが@mediaをサポートするように私のデスクトップビューに@mediaを使用したくない

my styles for global(normal - desktop) view 
... 
... 
... 
@media (max-width:500px){ 
my styles for mobile-friendly view 
}

この問題を解決します。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

ビューポートタグに関係なく、デバイスの特定のスタイルであなたのウェブサイトを提供するために使用されます。あなたの助け

出典

2016-05-08 leoine

うん、それは問題ないようです。ライブ版はありますか？ – Mamut

いいえ、まだウェブ上にはありません。私はAndroid WebView 4（デフォルトブラウザ）を最も一般的なものとして使用しました。しかし、Android用の最新のクロムバージョンでは同じです。 Firefoxは必要に応じてデスクトップバージョンを表示します。 – leoine

ため

希望は常に、あなたの<head> </head>要素内に以下の<meta>タグが含まれることを確認します。 widthプロパティは、ビューポート（仮想 "ウィンドウ"）のサイズを制御し、特定のピクセルサイズまたはデバイスの幅に設定できます。 initial-scaleプロパティは、ページがロードされたときのズームレベルを制御します。 maximum-scale,minimum-scale、およびuser-scalableは、ユーザーがページをズームアウトする際の表示方法をすべて制御します。

ユーザーが選択した要素にフォーカスしたときにページがズームしないように、一貫したページビューを維持するために個人的にスケーラビリティを無効にしました。これで問題が解決するかどうか教えてください。そうでなければ、あなたの問題を理解するためにCSSの例が必要になります。歓声〜

出典

2016-05-08 23:52:39 ManBearPixel

いいえ、残念ながら、これは問題を解決しません。私は、この問題が他の多くのサイトにあるので、私の* .cssファイルの通常のコーディングを超えて何かを追加する必要があると思います。テストするために、私はここに行った：http：// mediaqueri。es /といくつかのWebサイトをテストし、その動作は私のWebサイトとまったく同じです。 – leoine

メディアクエリをサポートしていないブラウザはIE 5〜8のみです。IE 9+がサポートしています。私のウェブサイトのビューの1％未満がInternet Explorerのブラウザから来ているので、私はIEの良いデザインを犠牲にしません。私は常にモバイルを最初にコーディングすることをお勧めします。

ページのヘッドセクションにビューポートを実装するは、である必要があります。 <meta name="viewport" content="width=device-width, initial-scale=1">

これはランダム最大幅であるので、私はmax-width:500pxを使用していないだろう...正しいものに固執して、あなたのCSSは次のようになります。

*-- SINCE WE ARE CODING MOBILE-FIRST, WE DO NOT NEED A MEDIA QUERY FOR IT --*/ 

Enter all base code here 

/*-- TABLET --*/ 
@media(min-width: 641px) { 
    ... 
} 
/*-- SMALL DESKTOP --*/ 
@media(min-width: 768px) { 
    ... 
} 
/*-- DESKTOP --*/ 
@media(min-width: 992px) { 
    ... 
} 
/*-- BIG DESKTOP (rarely used, but can be useful) --*/ 
@media(min-width: 1280px) { 
    ... 
}

は、モバイル・最初のCSSの意志をコーディングコードを簡素化し、堅実なスタイルベースを作成します。あなたの習慣をモバイルファーストコーディングに切り替えることは、最終的にレイアウトで作業する必要のあるあなたとデザイナーにとってプラスになります。これは防弾応答性のあるデザインを作成するのに有効な方法と考えられます。

出典

2016-05-09 17:13:45 BrainHappy

レスポンシブルデザインがモバイルからズームアウトされていない[@mediaクエリ]

答えて

関連する問題