モバイルWebの画面が拡大/縮小されないように設定する

  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

モバイル機器では、画面が拡大/縮小されないように設定する

最近出てくるほとんどの WordPress反応型(Responsive)に出てくるので、モバイル機器では、自動的にモバイル版が表示されます。 モバイル版で指を広げたり、オムリ、画面が拡大/縮小されないように設定するには、次のコードをheader.phpファイルに追加するようにします。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

もし <meta name = "viewport" content = "width = device-width、initial-scale = 1.0、maximum-scale = 1.0" /> メタタグが header.phpの ファイルに既に存在する場合 ユーザースケーラブル=いいえを追加するだけです。 Viewportをサポートするいないデバイスの場合、次のコードを追加します。

<meta name="HandheldFriendly" content="true" />

インターネットエクスプローラ(IE)10バージョンで正常に動作していない場合、 -ms-content-zooming:none | zoom 構文を使用します(ここ を参照)。 たとえば、次のようなCSSコードをスタイルシートファイルに追加するようにします。

html {

-ms-content-zooming: none;
-ms-touch-action: pan-x pan-y;

}
// Source: stackoverflow

モバイル機器から水平方向にスクロールされないようにする

モバイルデバイスから横(水平)にスクロールされないようにするには、次のようなコードを試してください。

body{
width:320px; // 혹은 적당한 크기 또는 100%
overflow-x:hidden;
}

この内容は、もはや有効ではないとMatthew様が教えてくれました。 iPhone、スマートフォン、メディアクエリは、 "iPad、iPhone、スマートフォンなどのモバイル機器に使用可能なメディアクエリ」を参考にしてみてください。

メモ:



12のコメント

  1. こんにちは〜divi使用中です。
    もしかしたら逆にviewportを使用する場合には、yesのみ変更してマキシマムを8に設定してheader.phpを変更したなら理由が難しいですね。
    読んでいただきありがとうございます。

    応答
    • Diviテーマを使用する場合は、開発者への支援を要請することができます。

      サポートリクエストの方法は、次の記事を参照してください。

      https://avada.tistory.com/1591

      応答
  2. 1。 水平方向にスクロールダメするコードは、style.cssに入れるんですか?
    2。 私 WordPress上のホームページの余白を指定したが、携帯電話でも余白がそのまま出てガジグㅠ
    もしかしたら、携帯電話で見ると余白をなくす方法があるでしょう?

    これのためにwptouchをインストールした消し、最初のコードを(header.phpの)消し入れたㅠㅠㅠ

    応答
    • こんにちは?
      ブログを訪問していただきありがとうございます。

      1。 CSSは、コードはスタイルシートファイル、すなわちstyle.cssファイルに配置します。 しかし、チャイルドテーマを作成したり、テーマ内でのCSSを入れるセクションがある場合、直接入れても良いです。

      https://www.thewordcracker.com/basic/how-to-add-css-in-wordpress/ 文を参考にしてください。

      2。 メディアクエリを使用してください。
      https://www.thewordcracker.com/miscellaneous/how-to-modify-the-wordpress-layout-for-mobile-devices/ 文で「// Only applies to mobile device screens whose minimum width is 768px」とされているコードの部分に余白を指定するコードを挿入すると、解像度が768px以上の機器でのみ、コードが適用されます。

      応答
      • 回答ありがとうございます! もっとさらにお尋ね見たく笑
        1。 ユーチューブ映像の場合には、反応型にならず、固定されたサイズをそのまま維持しようとしてモバイルでは、ゾーンを外れたんですよ、私overflowコードを使用すると、解決になると思っていた、まだダメですね。 もしかしたら、他の方法があるでしょうか?

        2。 ハムすでに WordPress- ページ上でvisual composerで余白が指定されていて、768px以下の機器に書かれた余白をなくすコードを挿入しようとし
        @media only screen and(max-width:768px){
        .vc_row {
        パディング - 右:0;
        padding-left:0;
        }
        }
        ヨロトゲスタイルシートに入れたのですがない理由はなにでしょうㅠ笑?
        その '.vc_row」にbodyも入れてみelement.styleも入れてみたとはいもダメですねㅠ

      • こんにちは?

        1. https://www.thewordcracker.com/miscellaneous/make-youtube-and-vimeo-vides-responsive/ 文を参照してみてください。

        2。 VCは予想外のバグが多くのプラグインです。 なるべく使用しないことをお勧めレイア​​ウト作業に慣れていない場合、使用する必要がありすることがあります。 ( https://www.thewordcracker.com/basic/pros-and-cons-of-page-builder-of-wordpress/ 参考)

        まずpadding-right:0!important;のように!importantを指定してテストしてみてください。

        そして、visual composer内での余白を指定することができそうです。 そのような部分をチェックしてみてください。
        よくないと、VC販売者に支援を要請してみません?

      • 1。 とありがとうございます! すべての場合の解決方法が既に投稿がされていますね! 笑
        2。 ㅠネ、最初からvcを使用せずにいる場合を分けて、スタイルシートにすることを試みて見なければならなりません。
        回答ありがとうございます!

    • ボングルに紹介されているcssは絶対に使用しないでください。 (ワード様は申し訳ありません)

      文一つ作成している偶然このコメントを見るたが、iPhoneの6のwidthは375pxは、iPhone 6 +のwidthは414px。

      このように機器ごとにdevice widthが異なりますので、ワードさんが作成したwidth:320pxそれは非常に長い時間前に(iPhoneの4時代)使用可能だったようであり、今ではあのようにcss作成といけません。

      モバイル機器でwidthは、常に反応型で作成する必要があります。

      「モバイルでも余白がそのまま出てガジグ〓 " - "反応型css作成」のような言葉でグーグリングとcssを作成する方法を教えて差し上げる文がハングルでも検索いただけると思います。 いくつかの特定の問題を解決するハシリョヌンよりは、cssを理解ハシリョヌン努力をされることをお勧め。

      今解決ハシリョヌン問題はcssのmedia queryを理解すると、簡単に解決できる問題です。

      応答
      • こんにちは?
        良い点ありがとうございます。

        width:320px; //あるいは適当な大きさや100%

        おそらく引用したワン文では、width:320px;となっているが、私はwidth:100%;にしてテストをしたようです。 (少し長くなって正確に思い出せないですね。)

        一番最後にあるCSSコードは削除するようにします。

      • あなたの現在の余白をパーセントで調整して、携帯電話でも余白が多く見えないようにしてノトギンしたが、
        お知らせいただいた方法で、一度検索して調べボギンなければなりませんね〜^^ありがとうございます。

  3. もしかしたら、横にスクロールしないようにはモトハナヨ? 拡大はならないのに、横にスクロールであれば、画面が横に移動しますね...

    応答
    • こんにちは?

      モバイル機器から水平方向にスクロールされないようにする方法を追加しました。 楽しい一日を^^

      応答