<meta name="viewport" content="width=720,initial-scale=0.5, minimum-scale=0.1, maximum-scale=1.0, user-scalable=yes"/>
 
加上这句话就对了,希望能留下你的赞!!

网站对移动设备友好，确保适当的绘制和触屏缩放：
 
<meta name="viewport" content="width=device-width, 
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
可以自适应手机宽度。
 
其中：
 width=device-width ：表示宽度是设备屏幕的宽度
 
initial-scale=1.0：表示初始的缩放比例
 
minimum-scale=0.5：表示最小的缩放比例
 
maximum-scale=2.0：表示最大的缩放比例
 
user-scalable=yes：表示用户是否可以调整缩放比例
 
 
 
如果只是写手机端页面 可以不用加。但是宽度必须按照百分比写。不加的话字体一般要30px才看的清楚，加了的话就是正常的12px如果是网页自动适应手机端就一定要加。最外层的div宽度设为百分百。以后再根据需要排版，可以用px或者百分比但是页面一般是用px 浏览器换成手机模式开发。和书写普通网页一样没有区别换成手机模式网页会自适应。宽度单位为px。
 
 
 
 <meta name="format-detection" content="telephone=no">  
<meta http-equiv="x-rim-auto-match" content="none">  
    <!--自动将网页中的电话号码显示为拨号的超链接-->  
<a href="tel:110">报警!</a>
 
 
向浏览器声明该网页为移动设备自适应网页的meta标签为（如果是想要一打开网页，则自动以原始比例显示，并且不允许用户拖动和放大缩小的话）：
 
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
<meta name="renderer" content="webkit|ie-comp|ie-stand">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="format-detection" content="telephone=no">
 <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
这段话需直接写在title标签上面，引入样式地址写在title后面 不然先引用样式表这句话就无效了
 
(1)、主要I是强制让文档的宽度与设备宽度保持1:1，最大宽度1.0，禁止屏幕缩放。
 
(2)、iphone的私有标签，iphone顶端状态条的样式。
 
(3)、这个也是iphone私有标签，允许全屏浏览。
 
(4)、禁止数字自动识别为电话号码，这个比较有用，因为一串数字在iphone上会显示成蓝色，样式加成别的颜色也是不生效的。
 
<meta name="format-detection" content="telephone=no,email=no">   电话，邮箱 两个一起写
 
3、去除Android自动识别邮箱地址
 
安卓有邮箱自动识别功能，而苹果却没有。想去除邮箱识别功能，那就在head中加入一个meta标签。

最近帮老师改个网站，将PC端网页改为手机端网页，虽然对于有一定开发经验的前端开发者是很easy的事情，但是呢，对于小白来说，还是很一头雾水的。下面咱们就从头来进行实战，看看自适应到手机端到底是怎么回事！
 
开发必备工具：
 chrome浏览器
 一部手机
 CSS手册（推荐菜鸟教程-CSS手册）
 
好了，咱们开始吧！
 
1、首先我先在电脑上打开网页
 
 
2、接下来使用chrome浏览器自带的手机模拟器看看这个网页在手机上显示的效果。（按F12或者点击浏览器右上角三个小点-》更多工具-》开发者工具）
 
 点击这个红框，就会显示模拟手机的样子
 
 第一个是可以选择手机类型，第二个可以调整手机的宽度和高度，第三个可以选择放大缩小比例。
 
好了，如果你拿着手机这样看网页，是不是很不舒服，进行操作也十分难受。
 
3、自适应第一步，添加meta
 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
这是个什么意思呢，通俗将就是等比例缩小了，按照你设备的宽度。
 下面是一些具体的参数和意义（刚入门不用记太多）
 
 
 
width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width
 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。 height：和 width 相对应，指定高度。
 initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
 maximum-scale：允许用户缩放到的最大比例。 minimum-scale：允许用户缩放到的最小比例。
 user-scalable：用户是否可以手动缩放。
 
 
咱们看看加入这段代码（对了，把这段代码加入到head后面），页面出现了什么变化
 
 这样看起来是不是比之前看着舒服多了。我在真实的手机上跑一下，看看是什么效果
 
 大家可以看到，右边有一部分缺失，需要向左滑动才行。这是肯定不行的，咱们的最终目标是将这个登录页面显示在手机的中心。
 
4、修改CSS样式
 
上面这个问题，我可以通过添加css样式解决，但是你想呀，直接 添加css样式，你在手机上显示可以了，但是在PC端的样式是不是也给修改了，咱们自适应的前提之一就是不改变PC端网页的样式。这时候，需要咱们第二段神奇的代码：
 
@media screen and (max-width: 720px) {

}
 
这个就是css中的媒体查询，max-width 意思为 当前页面的最大宽度 满足这个条件，就会执行这里面的代码。咱们将需要修改的CSS放入这里面，上面提到的这个问题岂不是迎刃而解了。
 具体点击：CSS媒体查询
 
ok，咱们就写入一些代码，看看显示的结果
 
 嗯嗯，看着不错！ 嗯？等等，不对，我发现我写的css失效了，怎么可能呢？
 
body{width: 90%; padding: 0px; margin:0px; min-width:350px;}
 

 我发现我给body写的css并没有起作用。原因是优先级的问题。
 
 的确如此，和浏览器中显示的一样。
 具体优先级问题点击查看：CSS优先级
 简单来说，写在body 上方style标签内的优先级要低于 标签内的。也就是它的优先级比我高，我写的就不显示了。
 
也就是
 
<style type="text/css">
优先级小
<style>

<p style=" 优先级大"></p>
 
我之前提过，写自适应尤其是给别人写自适应，一定尽可能不要动原来写的东西。这时候，咱们只需要通过添加！important 就可以使其优先级最高。
 
body{width: 90%!important; padding: 0px!important; margin:0px!important; min-width:350px!important;}
 
看看效果：
 
 这次是真的不错了，大体到这里就完事了。当然还可以有更细致的改进，这里就不提了。
 
最后说一下如何使用手机测试网页：
 首先你得有一个本地服务器，我使用的是php的，在电脑上访问地址是
 http://127.0,0.1/test/index.php
 
你需要把127.0.0.1 换成你电脑的ip地址
 具体：win+R-》cmd-》输入ipconfig
 找到ipv4的地址就可以，有的显示出来两个 这两个都可以
 
如有疑问，欢迎大家底部留言。

 
解决手机端网页缩放问题

 
这个申明是移动设备用的，1:1显示设备屏幕大小，禁止缩放
 加到网页文件< head > 标签中
 
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">