iPhone 手机浏览器 font-size 失效问题

问题

电脑端浏览器显示正常，iPhone手机浏览器却异常，如下图 用Safari调试iPhone手机网页，可以看到设置了 font-size: 12px 但实际浏览器渲染的字体大小却是 16px

解析

因为 Font Boosting 字体提升

Webkit 给移动端浏览器专门提供的属性 ，因为移动端屏幕小，原始页面宽度大，在移动端浏览器浏览网页时的字体会比较小，看不清，Font Boosting 会自动把字体变大，方便浏览。

解决

直接为该失效元素加一行代码：

text-size-adjust: none;

补充

补充一些其他的 css

body{
  /* 解决IOS默认滑动很卡的情况 */
  -webkit-overflow-scrolling: touch;
  /*隐藏滚动条，当IE下溢出，仍然可以滚动*/
  -ms-overflow-style:none;
  /*火狐下隐藏滚动条*/
  overflow:-moz-scrollbars-none;
}
/*chrome隐藏滚动条*/
::-webkit-scrollbar{
  display: none;
}
a,img{
  /*长按链接不弹出菜单*/
  -webkit-touch-callout:none;
}

我的个人博客,有空来坐坐