Twitter

iPhone向けサイトのリセットCSS(暫定版)

iPhone向けのサイトでは、ターゲットとなるブラウザはMobile Safariのみなので、本来は要素のデフォルトスタイルをリセットする必要はありませんが、marginやpaddingなどレイアウトに関するスタイルは最初にリセットしておいた方が調整しやすくなります。

以下、暫定版として自分用にメモしておきます。
html5でのコーディングを前提に、基本的にはPC向けサイトの要素のリセットと同様ですが、Mobile Safariならではのプロパティもあります。

@charset "utf-8";

/* =================================================
 * reset
 * ================================================*/

html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p,
header, hgroup, section, article, aside, hgroup, footer, figure, figcaption, nav {
	margin: 0px;
	padding: 0px;
	font-size: 100%;
}

body {
	line-height: 100%;
	-webkit-text-size-adjust: none;
}

article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary {
	display: block;
}

img {
	border: 0px;
}

ul, ol {
	list-style: none;
}

table {
	border-spacing: 0px;
	empty-cells: show;
}

Mobile Safariには、文字サイズを自動的に調整する機能があります。その機能を制御するためのプロパティが、16行目の「-webkit-text-size-adjust」プロパティです。
デフォルト値は「auto」ですが、基本的にCSSで文字サイズを調整するので「none」を指定し無効化しています。

※この記事は暫定版として掲載しています。
より良い方法が見つかり内容に変更があった場合は内容を更新し、更新履歴を以下に掲載します。


1件のコメント»

  1. [...] 前回のエントリー「iPhone向けサイトのリセットCSS(暫定版)」に引き続き、html5コーディング用のリセットCSSとよく使う項目をフォーマット化した自分用メモ。 [...]

    ピンバック by html5のリセットCSS(+α) | 2GRAVITY — 2012/02/06 @ 13:21

このコメント欄の RSS フィード TrackBack URI

コメントをどうぞ »

初めてコメントされる方は管理人の承認が必要となります。承認されるまではコメントは表示されませんのでご了承ください。

CopyRight© 2017 2GRAVITY All Rights Reserved. | powered by WordPress

Page top