to topto bottom

モバイルファースト時代のマルチデバイス対応を確実・簡単に

CSSリセットをJSで行うと、画面幅に合わせた指定がおかしくなる機種がある

こんにちは。x-fitチーム・エバンジェリストの渡辺です。
スマートフォン向けのWebサイトを作成する際には、ブラウザのデフォルトスタイルを初期化するために、CSSリセットを行うことがあると思います。このとき、JavascriptでCSSリセットをすると、viewportに対しておかしな影響を示す機種がありましたので、確認してみました。
 

HTMLソース

 
以下のようなHTMLとCSSを準備して、確認してみます。
 

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
  content="width=device-width">
<script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(window).load(function(){
  $("body").css("margin", "0px");
  $("body").css("padding", "0px");
  $("#container").css("width", "100%");
});
</script>
<title>load.html</title>
<link rel="stylesheet" href="./load.css" />
</head>
<body>
<p></p>
<div id="container">画面幅いっぱいのブロック要素
</div>
</body>
</html>

CSS

#container{
  border-style: solid;
  border-color: red;
  border-width: 3px;
}
 
 
HTMLには、viewportを指定し、その幅は、device-widthを指定しておきます。Javascriptで、ドキュメントのロード完了時に、bodyタグに対してpadding・marginを0に設定して、画面全体にコンテンツを配置できるようにしてみます。そのうえで、widthを100%に設定したdivを置き、それがどのように見えるかを確認します。
 

確認結果

 
 

画面幅と同じ表示の場合

画面幅と異なる表示の場合

 
画面幅と異なる表示になった場合、配置したコンテンツが画面幅より若干大きくなるため、viewportを設定しているにもかかわらず、横スクロールが発生する結果となりました。
コンテンツに対してCSSリセットを行って画面幅を設定する方法やタイミングは使う手段によってさまざまな方法が可能ですが、iOS以外の端末では、Javascriptを使用すると、画面幅が適切に適用されませんでした。ブラウザのユーザエージェントスタイルの適用タイミングと、Javascriptの幅指定、viewport指定の兼ね合いがうまくいっていないことが原因かと思われます。
CSSリセットは、通常、動的に変化させるものでもありませんので、スクリプトで設定しなくてもよいでしょう。外部CSSファイル内で定義するように変更すれば、OS問わず同じ表示になりますので、CSSリセットはリセット用のCSSを作成してHTMLから呼び出すようにしましょう。
 
x-fitは、スマートフォンに存在する機種依存を気にせずに、リッチなUIを持つスマートフォン向けWebサイトを作成できます。是非製品情報デモをご覧ください。
 
※本記事は、弊社開発チーム所有機での確認結果であり、全機種調査の結果ではありません。同一機種であっても、この現象が必ず発生することを保証するものではありません。これ以外や例外のある可能性がありますことをご了承ください。
 

 

タグ: 
このエントリーをはてなブックマークに追加