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


ピックアップ記事

ページIDからリンクを設定

2011年11月28日 WordPress
[php] <a href="<?php echo get_permalink('75'); ?>">お問い合わせ</a> [/php]
「ページIDからリンクを設定」をはてなブックマークに追加

WordPressの投稿日からの経過日数を調べる(2つの日付の差分)

2013年10月04日 WordPressphp
WordPressの投稿日からの経過日数を調べる(2つの日付の差分)
ブログの記事が古い場合に「この記事は古いから注意してね〜」みたいなお知らせが表示されるサイトをたまに見かけませんか? このサイトも賞味期限切れの記事がありそうな気配がムンムンしてきたので、半年以上前の記事は古くなってますよ〜って表示しようと思い、調べてみました。 実装したコード [php]<?php function day_diff($date1, $date2)…
「WordPressの投稿日からの経過日数を調べる(2つの日付の差分)」をはてなブックマークに追加

WordPress のWP-DBManager プラグインで自動的にデータベースのバックアップ

2012年01月28日 WordPress
初期設定 まずは、WP-DBManagerをダウンロードし、プラグインフォルダに入れたら、管理画面上から有効化します。 すると管理画面のメニューに「Database」というメニューが追加されるので、その中の「Backup DB」を開きます。 そこに英語で「.htaccess」関係の警告が出てると思うので、指示の通りの場所にある「htaccess.txt」を「.htaccess」にリネームして…
「WordPress のWP-DBManager プラグインで自動的にデータベースのバックアップ」をはてなブックマークに追加

wordpressのアーカイブ、カテゴリテンプレートで現在のタグIDを取得しリンクを設定する

2014年08月04日 web関連WordPress
アーカイブテンプレートで表示中のタグIDを取得する 下記で現在表示中のタグのtag_idが取得出来ます。 [php]$tag_id = get_query_var('tag_id');[/php] tag_idからタグページヘのリンクを設定する タグページヘのリンクを設定するには、WordPressのget_tag_link関数を使います。引数に先ほど取得したtag_idを設定…
「wordpressのアーカイブ、カテゴリテンプレートで現在のタグIDを取得しリンクを設定する」をはてなブックマークに追加

WordPressの抜粋表示の設定

2014年08月25日 web関連WordPressphp
WordPressの抜粋表示(excerpt)を以下のように動作させたかったので、自作してみました。 抜粋があれば抜粋表示 moreタグがあれば、それに従う 指定文字数より本文文字数が少なければ、そのまま表示 指定文字数より本文文字数が多ければ抜粋表示 コード functions.phpにコピペ。 [php]<?php //WordPress抜粋表…
「WordPressの抜粋表示の設定」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy