推荐设备MORE

如何让你的网站容易被浏览者

如何让你的网站容易被浏览者

疑难问题

web前段设计方案之痛:手机上访问器和pc访问器的

日期:2020-11-02
我要分享
web前段设计方案之痛:手机上访问器和pc访问器的width:100%的响应式难题 Tips: 调节 iPad 或 iPhone 可在设定中起动调节方式,在 Mac 中的 Safari 阅读文章器 一样打开开发设计者方式后,开展联网调节。作用彪悍。 近期在做一个网页页面时,发觉在 iPad 的 Safari 阅读文章器中情况显示信息不全,精准定位到该 div 后发觉特指定 css 的总宽为 100% ; 到百度搜索检索后发觉,safari 中 viewport 默认总宽为 980px,若事先未特定其原始 viewport 总宽,则会默认按照 980px 解决。 能够默认原始化 viewport 总宽或在 css 中设置 min-width,但非常简单的方式能够在 head 标识中原始化好 viewport。详细正下方编码: 假设网页页面总宽为 960px 或 1080px,可在width里加入该值,并将 initial-scale 设定一个适合的倍率值。 比如一个网页页面的总宽为 1080px,则设置为:那样无论载入前后左右转换全屏還是坚屏,都可以以友善显示信息。【可参照:个股配资 手机上端与pc整个阅读文章对比 】   但是例如头顶部部分设定为width:100%,而网页页面中间较大总宽为默认:1200px,头顶部和中间长短不1致。这一难题在pc端和手机上的默认清晰度不1致导致。该如调解决?   找了许多材料,终归找到来啦:

在网页页面的

中提升之上这句话话,可使网页页面的总宽全自动适应手机上显示屏的总宽:

 


/span meta name= viewport  content= width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes  /   /span meta name= apple-mobile-web-app-capable  content= yes  /   /span meta name= format-detection  content= telephone=no  /  
width=device-width :表明总宽是武器装备显示屏的总宽
initial-scale=1.0:表明原始的放缩占比
minimum-scale=0.5:表明最少的放缩占比
maximum-scale=2.0:表明较大的放缩占比
user-scalable=yes:表明客户不是是能够调解放缩占比
第二行:
设置iphone端网页页面全屏幕。
第三行:
撤销数据被分辨为电話号码。
假如是要想1开启网页页面,则全自动以初始占比显示信息,而且不容许客户改动得话,则是:

/span meta name= viewport  content= width=device-width(这儿是能够转变的,依据你的别的div的总宽来设定), initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no  /