7年前 (2014-11-19)  历史建站 评论关闭  17 
文章评分 0 次,平均分 0.0

刚开始做好模板后,用手机打开,直接傻眼儿了,字小的没法看,因为手机分辨率宽度为1080,信息小的基本看不到了。然后查看其他的手机页面,发现里面都有这句代码:

1、Meta 之 viewport

百度后才知道这句话会根据设备的分辨率宽度自动等比例缩放,这样就能实现在不同设备打开时自动适应,区别入下:

通汇集团-二手车wap网站之设备适配

通汇集团-二手车wap网站之设备适配

看完区别以后,还有一些常用meta标签也一并说一下。

2、Meta 之 format-detection

你明明写的一串数字没加链接样式,而iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号!想去掉这个拨号链接该如何操作呢?这时我们的meta又该大显神通了,代码如下:

telephone=no就禁止了把数字转化为拨号链接!
telephone=yes就开启了把数字转化为拨号链接,要开启转化功能,这个meta就不用写了,在默认是情况下就是开启!

 

3、Meta 之 apple-mobile-web-app-capable

这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示

加了该meta的情况
通汇集团-二手车wap网站之设备适配

 

 

4、Meta 之 apple-mobile-web-app-status-bar-style

作用是控制状态栏显示样式

status-bar-style:black

通汇集团-二手车wap网站之设备适配

 

status-bar-style:black-translucent

通汇集团-二手车wap网站之设备适配

 

 

除特别注明外,本站所有文章均为php技术交流原创,转载请注明出处来自https://www.2kuaiqian.cn/archives/76

关于
切换注册

登录

忘记密码 ?

切换登录

注册

扫一扫二维码分享