网页自适应解决iPhone苹果的safari浏览器手机横屏字体变大问题

发表于 讨论求助 2021-10-26 23:09:12

在style.css中添加以下代码:

css 代码复制内容到剪贴板
  1. /*   
  2. **修复iPhone横屏后字体变大   
  3. */     
  4. @media screen and (max-device-width: 320px){body{-webkit-text-size-adjust:100%}}    
  5. @media screen and (max-device-width: 480px){body{-webkit-text-size-adjust:100%}}    
  6. @media only screen and (-webkit-min-device-pixel-ratio: 2){body{-webkit-text-size-adjust:100%}}    
  7. @media only screen and (min-device-width: 768px) and (max-device-width: 1024px){body{-webkit-text-size-adjust:100%}}   


其中最重要的代码这个属性:

-webkit-text-size-adjust


“-webkit-text-size-adjust”是CSS3中的一个属性。这个属性,从字面上来看,就是“WebKit的文字大小调整”的意思。

什么是WebKit呢?

这是一种开源的浏览器引擎,而苹果的safari浏览器用的就是这种内核。其实chrome、Android的也是WebKit内核。

在WebKit内核的浏览器中规定,当在css中定义的中文font-size小于12px的时候,浏览器仍然使用12px。字体也会随着网页的变大而变大,这也是当你手机横屏时,字体变大的原因。而控制这个功能的,就是CSS 中的 -webkit-text-size-adjust。

text-size-adjust 设为 none 或者 100% 则关闭字体大小自动调整功能。

发表