2013年11月13日 WordPressjQuery・javascript

Twitter Bootstrapを使用して、レスポンシブなウェブサイトを制作していたのですが、iPhoneで縦画面、横画面での表示を繰り返すと画面からはみ出してしまう(拡大表示した時のように画面内にサイトが収まっていない)現象に悩まされました。

もちろん、縦でも横でも画面横幅ピッタリにサイトが表示されるのが理想なので、調べてみました。

今回使用していたのは、Bootstrap v3.0.2、で、それ以前のv2.3.2で作ったサイトは縦横に回転を繰り返しても問題なく表示されていました。

ちなみに、viewpointの設定は、以下の設定でした。

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

スマホサイトの幅は特別に設定しておらず、metaのviewpointの関係か、Bootstrapのresponsive.cssか、と思って調べると

  1. 横幅が画面をはみ出すようなサイズの画像やdivなどをpx指定している場合は、画面からはみ出すことがある
  2. スマホ自体の拡大縮小を制御または、不可にすれば解決する。user-scalable、maximum-scale

などがあったのですが、画像などはpx指定してないし、スマホでの拡大縮小など、ユーザーの閲覧に制限をつけるのも嫌だったので、どちらも違うなぁと思っていたら、海外の掲示板ですが、同じ症状で困っている方がいました。

Bootstrap responsive css and/or viewport issue/bug on rotation of a device
html, body {
    overflow-x: hidden;
}

cssに上記の設定を追加するだけで理想通りに動くようになりました。

これがBootstrapのバグなのか、私の使用方法にマズイ点があるのか、はっきり分からないままなので、気になりますが、とりあえず、問題は解決出来たので一安心です。

この投稿へのコメント

コメントはまだありません。

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CAPTCHA


ピックアップ記事

WordPress ウィジェットに個別のid,classを設定する

2014年08月11日 web関連WordPress
WordPressのウィジェットに個別のid,classを設定して、違うデザインを適用したい場合は、functions.php内でサイドウィジェットを有効にする設定項目の「before_widget」の箇所を以下のように変更します。 [php]register_sidebar(array( 'name' => 'side-widget', 'before_wid…
「WordPress ウィジェットに個別のid,classを設定する」をはてなブックマークに追加

WordPressで、現在の固定ページが子ページかどうか判別する

2013年10月03日 WordPressphp
WordPressで、現在の固定ページが子ページかどうか判別する
WordPressには、is_front_page() 、is_single() など、様々な条件分岐タグが用意されていますが、子ページかどうかを判別するタグはデフォルトでは用意されていないようなので、調べてみたら、WordPress Codex内にいくつかのパターンが説明されていたので、まとめてみます。 パターン1 判別したい箇所に以下を記述 [php]<?php glob…
「WordPressで、現在の固定ページが子ページかどうか判別する」をはてなブックマークに追加

javascriptでGETパラメータを取得する

2012年02月02日 jQuery・javascript
javascriptでGETパラメータを受信するには以下の関数を使うと簡単です。 関数を定義する 以下のコードをコピペしてください。 [php]function getUrlVars() { var vars = [], hash; var hashes = window.location.href.slice(window.location.href.indexOf('?')…
「javascriptでGETパラメータを取得する」をはてなブックマークに追加

wordpress カスタムフィールドの値で記事一覧取得、並び替え

2020年01月10日 WordPress
カスタムフィールドの条件が一つの場合 [php]<?php $args = array( 'posts_per_page' => -1, // 全件取得 'category' => array( 12,14 ), // カテゴリ 'meta_key' => 'finished', //カスタムフィールドのキー 'meta_value'…
「wordpress カスタムフィールドの値で記事一覧取得、並び替え」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy