手机网页浏览时字体缩小了,怎么办?

飘逸的风11年前 (2015-01-13)前端5873
在手机网站上,大小都控制好了,浏览时却等比缩小了,怎么办?

没关系,在<head>里加上以下几段代码,完美解决:

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />




在iPhone的浏览器中页面将以原始大小显示,不允许缩放。  

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">   

 

width - viewport的宽度 height - viewport的高度   

initial-scale - 初始的缩放比例  

minimum-scale - 允许用户缩放到的最小比例   

maximum-scale - 允许用户缩放到的最大比例  

user-scalable - 用户是否可以手动缩放  

 

-----------------------------------------------------------------------------

在iPhone 手机上默认值是(电话号码显示为拨号的超链接):

<meta name="format-detection" content="telephone=yes"/>

可将telephone=no,则手机号码不被显示为拨号链接

<meta name="format-detection" content="telephone=no"/>

-----------------------------------------------------------------------------
 

ios设备对meta定义的私有属性:(可以添加至主屏幕)
<meta name="apple-mobile-web-app-capable" content="yes" />

•网站开启对web app程序的支持。
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

•在web app应用下状态条(屏幕顶部条)的颜色;
•默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。

•若值为“black-translucent”将会占据页面px位置,浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。
-----------------------------------------------------------------------------
更详细的内容:https://www.cnblogs.com/yuzhongwusan/archive/2011/11/29/2267568.html
文章来源:https://blog.csdn.net/macwhirr123/article/details/11971303

相关文章

jQuery 滚动鼠标中键图片自动改变大小(统一控制)

今天维护一个项目,需要对内容里的图片通过图片中间控制大小。由于是以前完成的,客户之前也没有提出要求,所以对已经添加后的数据没办法在一个个地在图片上加函数。网上查找了一下控制中键的资料,终于找到解决办法...

jQuery自适应宽度导航插件Horizo​​ntalNav

jQuery自适应宽度导航插件Horizo​​ntalNav

Horizo​​ntalNav 是一个 jQuery 导航插件,能够自适应容器的宽度。如果你曾经在一个项目中创建过这种效果,你就会知道,这是很难处理的。但这个插件很容易,并且支持 IE6、IE7。...

jw player的快捷调用方法(附:jw player参数设定)

最近开发的项目需要调用一部分视频,找了很久,感觉有两个非常不错,一个是ckplayer(非常炫酷,网址:https://www.ckplayer.com/),感觉好奇的同学,可以访问他们的官网去看看;...

JS window.close()关闭新窗口,怎样才不会有提示?

最近做到的项目,把以前写过的关闭新窗口页面代码拿来直接用,结果在IE浏览器下,关闭时有一个关闭提示。这样对于一些有强迫症的人来说,是一个难以接受的梗。因此找了不少资料,总算有了解决方法,以下是分享。...

Microsoft.AlphaImageLoader滤镜讲解

Microsoft.AlphaImageLoader是IE滤镜的一种,其主要作用就是对图片进行透明处理。虽然FireFox和IE7以上的IE浏览器已经支持透明的PNG图片,但是就IE5-IE6而言还是...

jquery.validate.js 怎么用button提交

做项目时,遇到一个问题,就是把提交按钮换成普通按钮时,jquery.validate.js就无法执行了,找了一些资料,找到了一种非常简洁的方法: 把 <input type="subm...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。