コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 応答性の高いデザインを行うときに、モバイル ブラウザがページのサイズを自動的に変更しないようにする方法_html/css_WEB-ITnose

応答性の高いデザインを行うときに、モバイル ブラウザがページのサイズを自動的に変更しないようにする方法_html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 11:50:28
オリジナル
1347 人が閲覧しました

ご存知のとおり、レスポンシブ ページをデザインするとき、ページが傍受されるのを防ぐためにページ全体のサイズを縮小する特定のブラウザーに遭遇することがよくあります

コンテンツを表示するにはズームインする必要があります。これは、ページを自動的に調整するモバイルブラウザの機能です。

これは応答性の要件を完全に満たしていません。

それでは、ブラウザがページ サイズを自動的に調整しないようにする方法が問題になります。

他の人が書いたレスポンシブ コードを見ると、head タグに次のコードが表示されることがよくあります

<meta name="viewport" content="initial-scale=2.0,width=device-width"/>
ログイン後にコピー
タグ、name="viewport" はビューポートを制御することを指します。 、 content="initial-scale=2.0" はページを 2 倍に拡大することを意味します (同様に、0.5 は半分に縮小することを意味し、3.0 は 3 倍に拡大することを意味します),

同時に、width=device-widthページの幅がデバイスの幅と等しくなるようにブラウザに指示します。

タグは、ページのズーム可能な範囲を制御することもできます。次のコードを使用すると、ユーザーはページをデバイス幅の最大 3 倍まで拡大し、最小でもデバイス幅の半分まで圧縮できます。 

<meta name="viewport" content="maximum-scale=3.0,minimum-scale="0.5",width=device-width"/>
ログイン後にコピー
もちろん、ズームを無効にすることもできます、 

<meta name="viewport" content="initial-scale=1.0,user-scalable=no"/>
ログイン後にコピー




関連ラベル：
响应式设计时如何自动阻止移动浏览器自动调整页面大小
ソース：php.cn
前の記事：CPropertySheetタブは各種CPropertyPageの切り替えを実現pages_html/css_WEB-ITnose 次の記事：ブートストラップ CSS コーディング仕様_html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2184
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2331
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1960
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1845
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1897
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート