iphone ipad CSS font-size 異常 解決方法 iphone ipad CSS font-size 異常 解決方法
  CSS       ez      2016-04-26

無意間發現 iphone 或 ipad 的 CSS Bug,當相同的 font-size CSS 連續出現,就會發生異常。

如下圖,12級字比15級還要大!

以下為測試用HTML:

使用 iphone 或 ipad 就會出現如上圖狀態,Android 正常。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>iphone CSS錯誤測試</title>
    <meta charset="utf-8" />
    <style type="text/css">
        .c1 {
                color: #ff0000;
                font-size:15px;
            }
        .c2 {
                color: #009900;
                font-size:12px;
            }
        .c3 {
                color: #000099;
                font-size:12px;
            }
    </style>
</head>
<body>
    <span class="c1">15級字</span><br />
    <span class="c2">12級字</span><br />
    <span class="c3">12級字</span><br />
</body>
</html>

 

解決方法1:

在 head 加入:<meta name="viewport" content="width=device-width"> 就會正常!

設定頁面寬度為 device-width,由此猜測可能因為 iphone & ipad 自動縮放文字造成異常。

接下改為:<meta name="viewport" content="width=650"> 發生異常!

※ 當設定固定寬度時,還是會發生異常狀況!所以不是RWD網頁需要指定寬度,就不可以使用此方法。

 

解決方法2:

加入以下 CSS:

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

就會正常!用此語法強制瀏覽器不要縮放文字。


標籤:   CSS、  ipad、  iphone

我要留言