カテゴリー: web

S社の特定商品取引法表示の表組の第2列がiphoneだと文字が大きくなり、contentの中に収まらない現象が発生

1.　Tableのコードとcssをきれいに整理し、WinFirefox、MacSafariのインスペクターで確認。

2.　iphoneのみが改善されない。Web検索したところ、次の記事にたどり着く。

iPhone版Safariで文字サイズがおかしくなるときは
-webkit-text-size-adjust: 100%; を指定する。

この記事では

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

というように、bodyに-webkit-text-size-adjust: 100%;を記述しているが、
とりあえず、問題を起こしている箇所#content #column1 table tr .rightに記述

#content #column1 table tr .right {
	width: 375px;
	-webkit-text-size-adjust:100%;
}

↑Code1
これで解決。

Normalize.cssを呼び込むか、

/**
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */
}

↑Code1をreset.cssに記述すればいいようだ。