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からリンク、アンカーテキストを自動で設定する

2013年10月21日 WordPressphp
WordPressでidからリンク、アンカーテキストを自動で設定する
WordPressで記事IDからリンクURLを設定するには、以下のようにすることが多かったのですが、先日、作ったサイトでは、以下のようなコードをコピペする回数が多く、もう少し簡単に使い回したかったので、IDだけ設定して、リンク先のURLも、リンク先ページ名も自動で表示する関数を利用しました。 こんな感じのコードでヘッダーやフッターにリンク設置していた [php]<a href=&qu…
「WordPressでidからリンク、アンカーテキストを自動で設定する」をはてなブックマークに追加

WordPressで現在表示中のテンプレートファイル名を取得

2014年08月25日 WordPressphp
現在のテンプレートファイル名の拡張子を除いた名前をbodyのidに設定したかったので、テンプレートファイル名を取得する方法を調べました。 WordPressのトップページとカテゴリページでデザインを変えたい場合などに役立つかと思います。 [php]global $template; $template_file_name = basename($template, '.php');[…
「WordPressで現在表示中のテンプレートファイル名を取得」をはてなブックマークに追加

WordPressのサムネイルのサイズ指定を削除

2013年11月10日 web関連WordPressphp
WordPressのテーマ内で、the_post_thumbnailで記事のアイキャッチを表示させる際に、width,heightがimgタグ内で設定されていますが、それを消す方法です。 レスポンシブウェブデザインをする際には、ハードコーディングは外したほうがいいかもしれませんね。 functions.php内に以下を記述 [php]//サムネイルのサイズ指定削除 add_fi…
「WordPressのサムネイルのサイズ指定を削除」をはてなブックマークに追加

記事IDからリンクを設定

2011年11月21日 WordPress
コード記述例: [php]<p><a href="<?php echo get_permalink(5); ?>">記事ID5へのリンク</a></p> [/php] 出力例: …
「記事IDからリンクを設定」をはてなブックマークに追加

簡単に記事が編集出来る WordPress のプラグイン

2011年05月26日 WordPress
ということで、タイトル通りのプラグインを紹介します。 Front-end Editor はログインして管理画面から操作しなくても、WPのサイト上から記事やウィジェットなどの編集を可能にしてくれる便利なプラグインです。 Front-end Editorの使用方法 プラグインをダウンロード 管理画面からプラグインを追加するか、このへんからダウンロードして、FTPでサーバにアップしてください。 …
「簡単に記事が編集出来る WordPress のプラグイン」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy