ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

Androidのスマホ画面を横向きに見た時にヘッダーが崩れる!?そんな時の対処法!

2016年12月13日
icon_android

スマホサイトをコーディングしている時に、実機確認をする為にandroid端末で横向きにページを見て見ると、ヘッダーが崩れているー!!ってことがありました。
ちなみに僕が実機確認で崩れが確認できた端末はandroid4.2でした。

原因を調べていると、スマホサイトで良く見かける、スクロールしても要素が固定配置されてついてくる、追従ヘッダー(スティッキーヘッダー)を実装する為に、position:fixed;を使い、要素の幅にwidth:100%;を指定していたことが原因でした

androidの旧バージョン(4.4以下で起きることがあるらしい)では、position:fixed;を指定した要素に%でwidthを指定すると起きる、固有のバグのようです。
解決方法を備忘録として下記に残しておきます。

html

1
<div class=”header”>ヘッダー要素</div>

スポンサードサーチ

css

1
2
3
4
5
6
7
8
9
.header {
    position: fixed;
    width: 100%;
}
@media screen and (orientation:landscape) {
    .header {
        width: 100%;
    }
}

あまり見かけない記述で、
orientation : landscape
オリエンテーション(適応、順応):風景
直訳すると分かりづらいですが、
landscape orientation は、横向き、横長の意味のようです。

つまり、端末が横向きの時にもwidth:100%;を適用してあげる、という意味になります。
これでandroidの旧バージョン(4.4以下)でもfixedを使った要素の追従が実装できますね!

参考サイト:
http://qiita.com/yukinaka/items/d621326812be637d6ab2
http://ejje.weblio.jp/content/landscape+orientation

関連記事

  • 超簡単!cssを使って背景画像のみ透過にする方法2016年11月5日 超簡単!cssを使って背景画像のみ透過にする方法
  • 「もっと見る」ボタンの「>」矢印アイコン画像をレスポンシブでも位置を綺麗に表示する方法2016年11月10日 「もっと見る」ボタンの「>」矢印アイコン画像をレスポンシブでも位置を綺麗に表示する方法
  • 超便利! img要素を表示領域(枠内)で上下左右に中央表示させる方法2017年4月19日 超便利! img要素を表示領域(枠内)で上下左右に中央表示させる方法
  • 【jQuery】ファーストビュー(画面全体)に背景画像をスライダーで表示させる方法(prev , next , ページャー付き)2017年11月10日 【jQuery】ファーストビュー(画面全体)に背景画像をスライダーで表示させる方法(prev , next , ページャー付き)
  • グローバルIPアドレスの確認方法|プライベートIPとの違い・特徴について!2016年8月17日 グローバルIPアドレスの確認方法|プライベートIPとの違い・特徴について!

スポンサードリンク

  • 最近の投稿

    • 【基礎】Vue.jsの『コンポーネント』とは?【基礎】Vue.jsの『コンポーネント』とは?2019年6月25日
    • 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法2019年6月17日
    • コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法2019年3月8日
    • 【Mac】vscodeの拡張機能を一括インストールする方法【Mac】vscodeの拡張機能を一括インストールする方法2019年3月8日
    • js不要!cssのみで『無限ループスライダー』を作成する方法js不要!cssのみで『無限ループスライダー』を作成する方法2019年2月24日
    • jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法2019年1月30日
    • 【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法2019年1月30日
    • 【css】文字(テキスト)にborderをつけるように縁取りをする方法【css】文字(テキスト)にborderをつけるように縁取りをする方法2019年1月30日
  • カテゴリー

    • AMP (2)
    • android (1)
    • atom (2)
    • css (25)
    • facebook (1)
    • font (1)
    • form (1)
    • FTP (1)
    • git (3)
    • gulp (3)
    • html (2)
    • IE (1)
    • instagram (1)
    • iphone (3)
    • jquery (13)
    • js (5)
    • Mac (10)
    • Photoshop (5)
    • SourceTree (5)
    • Subversion (1)
    • twitter (1)
    • Vue.js (3)
    • Webフォント (1)
    • windows (2)
    • WordPress (7)
    • お知らせ (1)
    • サクラエディタ (1)
    • セキュリティ (1)
    • パララックス (1)
    • 便利ツール (6)
    • 差分チェック (1)
    • 日記 (4)
  • アーカイブ

  • タグ

    android atom background-image before break-all clcl clipmail counter-increment cssハック facebook git github html IE11 instagram iphone ipアドレス linear-gradient Math.random mCustomScrollbar Noto Sans Japanese select snapwidget SourceTree table tool transform transition twitter url改行 windows word-break お問い合わせ コピペ サクラエディタ スクロールバー タスクバー テキストエディタ パッケージ フォーム プラグイン 埋め込み 擬似クラス 改行コード 純正ボタン

    Copyright © 2016 ヤビブロ All Rights Reserved.