Webの記録

iPad・iPhoneでレイアウトが崩れた時に試してみたこと

投稿日:2013年6月19日 更新日:

この記事は約 7 分で読めます。

s00229

今まではWebサイト制作は、PCでの表示だけを意識して作っていたのですが、最近iPadやiPhone・Androidでのアクセスが増えて、お仕事の依頼もPCだけでなくタブレット端末での表示も必須になってきました。

今回コーディングをしていて、PCやAndroidではちゃんと表示されるのに、iPadやiPhoneだけ表示がおかしい?!
・・・なんてことが発生してしまいました。ちょっと慌ててしまいました。。。

iPad・iPhoneレイアウトが崩れて困った時に、私が試してみたことをメモとして残します。

【2015.6.22追記しました。】



目次

  1. コンテンツが画面いっぱいに表示されず、右側に変な余白が出た時
  2. ランディングページなど長いページで、背景を大きな画像として表示したい時
  3. 背景をスマホで画面いっぱいに表示したい時
  4. positionで配置した画像が崩れていた時
  5. スマホでリンクをタップした時にでる「ハイライトカラー」を消したい時
  6. iOSで送信ボタンのデザインがおかしいとき
  7. 今回制作してみて、思ったこと

1.コンテンツが画面いっぱいに表示されず、右側に変な余白が出た時(その1)

iPad・iPhone・Android対応って事でviewportを記述した途端に、表示がおかしくなってしまいました。
viewportを削除された方のブログも幾つか見ましたが、ひとまず入れる方向で試してみました。

//例えば、以下のような記述。。。
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1">

そこで、サイトのコンテンツ幅をviewportの一文に記述する事で解決できました。

<meta name="viewport" content="width=640,  user-scalable=yes,">

ただし、width=640部分は「200~10,000」の範囲で値を指定すると、無理やり様々な画面サイズのスマホでもwidthが640pxで表示させることが可能です。

この方法だとコーディングは「position: absolute;」などを使ってもあまり崩れる事がなく、PC用のコーディングと変わらない感じでできました。



2.コンテンツが画面いっぱいに表示されず、右側に変な余白が出た時(その2)

viewportに無理やりコンテンツ幅をwidth=640のようにせずに、余白を消すことができたのでメモします。

cssで先にmarginやpaddingに0を設定していて、iPhoneで余白が出たことに気づいて以下の1行を加えたら、余白が消えました。

#wrap {
	overflow:hidden;
}

たった1行で解決!!ビックリでした★



3.ランディングページなど長いページで、背景を大きな画像として表示したい時

背景画像が大きい(重たい)と、iPad・iPhoneでは表示が出来ないようです。
私が確認したAndroidでは表示できましたが・・・。

iPad・iPhoneで表示するにはCSS3で分割した背景画像で対応します。

CSSの記述例は以下の通り。他にも記述の仕方がいろいろあるようです。
【参考にさせて頂いたサイト:Design Notesさま「背景画像の複数指定の一例 CSS3」】

background: url(../images/bg_01img.png) center top, url(../images/bg_02img.png) center 700px, url(../images/bg_03img.png) center 750px; 
background-repeat: no-repeat;

ただしIE8以下はCSS3は対応していないので、注意が必要!です。
IE8以下をCSS3に対応させる「CSS3 PIE」というプラグインが今回使えなかったので、単純にIE8以下だけに対応させるスタイルシートを作って分岐させました。
HTML5対応の為のjaも読み込むし・・・分岐はどうせしているので、まぁいいかぁという感じで。。。

 <!--&#91;if lt IE 9&#93;>
<link href="css/ie8style.css" rel="stylesheet" type="text/css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<!&#91;endif&#93;-->

【参考にさせて頂いたサイト:Design Notesさま「PCサイトを【ipadやiphone】で表示した時のいろいろ」】

4.背景をスマホで画面いっぱいに表示したい時

で、スマホの画面サイズに応じて表示サイズが可変する場合、部分的な背景のサイズが可変できないということがありました。

「width: 100%;」でしてもダメだったので、以下の記述をすると画面いっぱいに表示できました。

background: url(../images/acordion_off.png) #fff  no-repeat center;
background-size:cover; /* 背景画像をhtml要素にフィット */

5.positionで配置した画像が崩れていた時

iPad・iPhoneだけ、何故かpositionで配置した画像がおかしな位置に表示される現象が起きました。

そこで、positionでの配置を止めて別の方法で配置。(floatやmarginなど)
すると、うまく表示されました。単純に「position: absolute;」を使っていただけなんですけど・・・。しかも、うまくいく時もあって、理由はよくわかりません。。。

position: fixedで固定するデザインは、iPadやiPhoneに有効でないというブログもありましたので、positionの使用は注意が必要なのかも?!(大好きだったのに。。。)

【参考にさせて頂いたサイト:デザインブログさま「iPadに最適化したサイトがつくれるかもしれない5つの方法(基本編)」】

6.スマホでリンクをタップした時にでる「ハイライトカラー」を消したい時

ボタンやテキストなどのリンクを、iPhoneやAndroidでタップすると、その部分に色や枠がつきます。

デザイン的にそれが合わない、もしくはハイライトカラーがヘンな部分まで出てしまうという時に「ハイライトカラー」を非表示にすることができます。

iPhoneなどのiOS系はハイライトカラーの変更ができますが、Androidは色の変更ができず非表示するしかできません。

そんなワケで「ハイライトカラー」を表示しないようにする記述例は以下の通り。

#btn01 a {
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}



【2015.6.22追記】7.iOSでボタンのデザインがおかしいとき

PCとAndroidではcssで意図した通りのデザインになったのですが、iPhone・iPadだけ妙なグラデーションや角丸になってしまうことがあります。

そんなワケで、以下のように対策しました。たった1行を追加しただけで、解決しました!

  input[type="button"],input[type="submit"] {
    -webkit-appearance: none;
  }



8.今回制作してみて、思ったこと

普通にPCサイトをiPad・iPhoneでキレイに表示させようとしたことで、上記のような躓きがありました。きっとまだまだこれからも出てくるのだと思います。

いろいろ調べていると、もっとiPad・iPhone的にいろんな設定をしだすと、今回問題のなかったAndroidでも未対応なものがあったり・・・と、全てに対応するのはかなり大変だということが分かりました。

いまだにIEで泣かされることもあるというのに、更にタブレット端末にまで・・・となると、制作がかなり大変になってきそうで怖いです!
IEの古いブラウザは切れる場合はできるだけ切って、なるべくシンプルにしたいところです。

また今回出てこなかったiPad・iPhoneでの問題が出てきたら、都度アップしていきたいと思います。


【関連かもしれない記事】

-Webの記録
-, , , , ,

執筆者:


  1. kangyoosam より:

    ありがたいです。助かりました。

  2. Motoshige より:

    kangyoosamさま
    コメントありがとうございます。
    お役に立てたようで良かったです。

  3. さる より:

    2.3時間悩んでいたものが一発で解決しました。
    ありがとうございました。

    • Motoshige より:

      さるさま
      コメントありがとうございます。
      お役に立てたようで良かったです。
      私も実は同じように数時間悩んで見つけた解決策でした。

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

関連記事

no image

WordPressテンプレートタグをメモ【コンテンツ編】

この記事は約 1 分で読めます。WordPressにはたくさんのテンプレートタグがあります。 似たようなものや、同じ結果なのに記述の仕方が何通りもあったりするので、後で「何だっけ?」って思う事もしばし …

no image

パンくずリストをGoogleの検索結果ページで表示させる方法

この記事は約 1 分で読めます。 Googleで検索をした時に、検索結果でサイトタイトルの下にパンくずリストが表示されているのを見かけたことはありませんか? 最近妙に気になって・・・(今頃?!)、私も …

no image

easySlider1.7.jsを使ってFlashのようなスライドショーにチャレンジ♪

この記事は約 1 分で読めます。「easySlider1.7.js」を使って、数枚の画像のスライドショーを作りたいと思います。 自動で画像がスライドしますが、見ている人の意思で前後の画像へ戻したり進め …

no image

Webフォント「Google Web Fonts」を使ってみた

この記事は約 1 分で読めます。 だんだんと古いブラウザに対応しなくてよくなってくると、以前は画像だけで対応していたものがcss3などを利用できるようになってきます。 Webフォントもcss3の技術。 …

no image

パソコンでスマホやタブレットの表示を確認出来るGoogle Choromeデベロッパーツール

この記事は約 1 分で読めます。Webサイトを制作する時、コーディングしながら都度いろんなブラウザで表示確認をします。 レスポンシブサイトとなると、今まで以上に表示をいろいろ確認しながら・・・の作業に …