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%;
}就會正常！用此語法強制瀏覽器不要縮放文字。
本文章網址：
https://www.ez2o.com/Blog/Post/iphone-ipad-font-size-css-bug-fix
https://www.ez2o.com/Blog/Post/570
https://www.ez2o.com/Blog/Post/iphone-ipad-font-size-css-bug-fix
https://www.ez2o.com/Blog/Post/570
留言
高雄找外約服務LINE：a35053 高雄找小姐/高雄酒店叫小姐 ( 2021-04-29 )高雄找外約服務LINE：a35053 高雄找小姐/高雄酒店叫小姐/上門服務按摩高雄汽車旅館叫小姐/約妹/學生/找魚
高雄找外約服務LINE：a35053 高雄找小姐/高雄酒店叫小姐/上門服務按摩高雄汽車旅館叫小姐/約妹/學生/找魚
高雄找外約服務LINE：a35053 高雄找小姐/高雄酒店叫小姐/上門服務按摩高雄汽車旅館叫小姐/約妹/學生/找魚
高雄找外約服務LINE：a35053 高雄找小姐/高雄酒店叫小姐/上門服務按摩高雄汽車旅館叫小姐/約妹/學生/找魚
高雄找外約服務LINE：a35053 高雄找小姐/高雄酒店叫小姐/上門服務按摩高雄汽車旅館叫小姐/約妹/學生/找魚
高雄找外約服務LINE：a35053 高雄找小姐/高雄酒店叫小姐/上門服務按摩高雄汽車旅館叫小姐/約妹/學生/找魚
高雄找外約服務LINE：a35053 高雄找小姐/高雄酒店叫小姐/上門服務按摩高雄汽車旅館叫小姐/約妹/學生/找魚