カテゴリー︎： iPhone (iOS)・【CSS】
レシポンシブサイトを作っていてPCは特に問題なく表示されている
スマホ端末での表示も問題なし
しかしながら、タブレット端末でみると左右に画面がグラグラ揺れるーー
なぜだ！？
なんか昔もこんなことがあった気がするが。。。直しかたを忘れてしまった
具体的に言うとタッチパネルを指で触り
画面を左右に動かすと、画面が左右に動いてしまう状態である
本来であれば、指で画面を左右に動かしても固定されているはずだが
なぜか、横にぐらぐら動いてしまう
約２０分ほど、いろいろ試し解決したのでメモっておく
今回、一番効率が良いと思った方法として
cssはいじらないで、htmlのブロックを
ブロック毎に削除して → タブレット端末で確認する
ブロック毎に削除して → タブレット端末で確認する
ブロック毎に削除して → タブレット端末で確認する
を繰り返すことで、問題箇所のアタリをつけることができた
【解決】
今回のぐらぐらする原因は、table組みの箇所でした！
よくある原因として padding設定 で widthの外側に加算され
１００％を超えてしまうと横にぐらぐら動いてしまう
今回はtable組みの箇所では padding を設定していなかったのに
横にぐらぐら動いてしまった。。。
確認してみると table の 横幅である widthが未設定だったので
width に 1000px を指定したら、解決した！
css記述
↓
table {
width: 1000px;
}
なぜ、 1000px かというと
table要素を囲っている div.inner の横幅指定が width: 1024px だからである
残りの 24px は左右に余白を持たせるため（デザインによる）
その他試してみたが
div.inner の横幅指定が width: 1024px なので
tableの width: 1024px では 画面が左右に動いてしてまうが
tableの width: 1023px では ガッチリ画面が固定されたのである
ちなみに、パーセンテージの指定だと
width: 100% では 画面が左右に動いてしてまうが
width: 99% では ガッチリ画面が固定された
もしスマホ・タブレットレイアウトで画面が左右にグラグラ揺れた場合は
試してみてください〜