android 横屏字体变小,网页自适应解决iPhone手机横屏字体变大问题

先森在完成网站自适应的过程中，遇到了很多大大小小的问题，其中一个问题就是横屏字体变大的问题。这个问题一碰到感觉很麻烦，其实解决方法却很简单。

网页自适应解决iPhone手机横屏字体变大问题

网上搜索结果中有很多答案，但是经过先森实践后，最终觉得有用的是在style.css中添加以下代码：

**修复iPhone横屏后字体变大问题

**//www.capjsj.cn/wyzshjj_iphone_sjhpztbdwt.html

@media screen and (max-device-width: 320px){body{-webkit-text-size-adjust:100%}}

@media screen and (max-device-width: 480px){body{-webkit-text-size-adjust:100%}}

@media only screen and (-webkit-min-device-pixel-ratio: 2){body{-webkit-text-size-adjust:100%}}

@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内核，但是先森调试的时候用的是iPhone，所以这里就只说iPhone了，而且好像只有iPhone容易遇到这个问题。

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

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

大家可以看出，先森在上面提出的代码中，用的是100%而不是none，这是为什么呢？先森看了一篇博文，当时没有收藏，所以现在也不知道是哪看到的了。博主提出，添加none会有问题，所以建议设置为100%。当时博主没有说是什么问题，我们想想也就明白了。如果设置none的话，随着网页变大，你的文字还是不会变化，这就导致用户体验不好了。所以也有很多回答建议不要讲该属性设置为全局属性。

先森最初找到的代码也是设置的none，但是看了这篇文章后先森将其改为100%。其实用none也没有问题，因为上面的四行代码是判断浏览器宽度后生效的。这一点就见仁见智了，根据大家的实际情况来使用。

除特别注明外，本站所有文章均为成航先森 www.capjsj.cn原创，本文共1287个字

转载请注明出处来自https://www.capjsj.cn/wyzshjj_iphone_sjhpztbdwt.html

android 横屏字体变小,网页自适应解决iPhone手机横屏字体变大问题相关推荐

h5 android 字体设置,解决因为手机设置字体大小导致h5页面在webview中变形的BUG
解决因为手机设置字体大小导致h5页面在webview中变形的BUG 首先,我们做了一个H5页面,在各种手机浏览器中打开都没问题.我们采用了rem单位进行布局,通过JS来动态计算网页的视窗宽度,动态设置 ...
12中技巧解决iPhone卡顿、变慢问题
老款的 iPhone 每次在升级 iOS 系统或是手机用久了有可能会遇到卡顿.变慢的情况,和大家分享提升苹果手机顺畅度小技巧,来看看吧! 解决iPhone卡顿.变慢技巧一.关闭背景App重新整理二 ...
Mac使用技巧：解决iPhone卡顿、变慢的问题
老款的 iPhone 每次在升级 iOS 系统或是手机用久了有可能会遇到卡顿.变慢的情况,和大家分享提升苹果手机顺畅度小技巧,来看看吧! 解决iPhone卡顿.变慢技巧一.关闭背景App重新整理二 ...
html如何让网页的字变小,网页的字变小了怎么办网页字体调整方法【图文】
互联网是我们生活中使用的比较多的电子网络圈,我们有时候上网,网页上的字体突然变的很小,看起来觉得很不舒服.网页的字体为什么会突然变小呢?这可能跟我们的设置有关系,有时候我们下载了浏览器或者软件,会导致 ...
python常用字体显示方框_中文变小框框？深入剖析matplotlib的字体逻辑
作为Python下最流行的数据可视化库,matplotlib为众多不同需求的绘图任务提供了相当简单易用的接口.但时至今日(2019年7月),已经更新到3.1.x的matplotlib,仍然还会给它的不 ...
小程序PHP字体,微信小程序在text文本实现多种字体样式
这篇文章主要介绍了微信小程序在text文本实现多种字体样式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下微信小程序比较特别,它的wxml只允许用自 ...
苹果手机声音突然变小是怎么回事_手机电话音量突然变小什么是原因？是手机出问题了吗...
大家是否有过这样的经历,就算把手机音量调到最大声,打起电话来还是觉得音量小,怎么都听不到对方的声音,其实当你听到声音很小的时候,很有可能是自己的手机出现了问题! 打电话是手机使用中最基本的一个功能,也 ...
苹果手机变卡了怎么解决_iPhone手机变卡怎么办？五个解决方法你需要知道
经常有一些网友问我:「iPhone6/6S越用越卡了,怎么办?」,遇到这种问题,很多朋友可能会以为自己的手机快要寿终正寝了,可以准备换一个.其实不然,还是有方法可以抢救一下卡顿的手机,让它变流畅一些的 ...
ppt流程图字体太小_【PPT】几种处理字体的小方法，让PPT中的字体更好看
撰文 | 晓光你好,这里是陈西设计之家. 我们经常设计制作PPT使用一些常规的字体,没有多余的设计,可能并不好看那么今天,我们来讲解几种字体的处理方式,让PPT中的字体设计更加的好看. ▣ 01 ...

android 横屏字体变小,网页自适应解决iPhone手机横屏字体变大问题

android 横屏字体变小,网页自适应解决iPhone手机横屏字体变大问题相关推荐

最新文章

热门文章