网页元信息大揭秘，手机屏幕适配神器

亲们，聊点儿有意思的说到网页元信息，你们懂不？这个东西可是用来告诉咱们这个网页干嘛用的，比如关键字啊什么的。不仅搜索引擎要用到它，网站更新时也超级好用。不过，这元信息都躲在页面头里，看着像没啥似的。是不是挺好玩的？

哈喽，咱挑明说了，这种神奇的东西其实就是大家在网上看到的东西！别忘记了，手机屏幕比电脑小多了，所以webkit浏览器就想办法解决了这个问题。它在手机上弄出了一个超级巨大的“假”窗口，这样你平常上网时，它就可以先加载一个宽度大概980像素（多数网站都是这么做的哦）的窗口，然后再缩成490像素。而且，这个缩小可不光是窗口，而是连同所有页面上的东西一起缩小。

<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">

那么要如何轻松搞定视口尺寸？超简单！首先，把网页宽度设成device-width就能让它们自动适应手机屏幕了。其次，别忘了还有个初始缩放（initial-scale）的参数，这可是决定你首页压缩得多厉害能与屏幕完美贴合的关键。记住，这里得用小数。再来说说最小缩放（minimum-scale），这个就是控制你能否随意放大缩小页面的机关。设置成“yes”的话，想怎么调就怎么调; 但要是设为“no”，那就不能改大小喽。

别停，我们还要讲关键词！它们对于搜索引擎很重要，不仅能让你搜到更有质量的结果，还能提高我们页面对搜索引擎的易读性。说明，就是网页上放些关键词，让搜索引擎明白我们在说什么；还有那个“描述”也厉害，它可以向大海一样把我们网站的特点和作用都告知出来！

咱们接着聊聊这个叫做”format-detection”的神奇功能。它能帮我们找出来那些HTML格式错误，比如你明明输入了些数字，却没有把它们设置为链接，结果iPhone还会把这些数字当成链接，甚至有时候还意外打通电话！不过别担心，只需设置个参数”telephone=no”就能解决这个问题！要是你喜欢这种方式，完全可以保留这个meta标签，因为默认是启用的哟。

小伙伴们，猜个东西～今天我就告诉你们一个超级实用的功能。以后你在电脑上网页打邮箱地址，iPhone就能自动认出来，还能帮你点进去！这样是不是少了好多烦恼！但是想要关闭的话也是很容易哒，只需要在设置里找到「email=no」这一选项，然后关掉就好！

　meta name="format-detection" content="telephone=no"
　　　　meta name="format-detection" content="email=no"
　　　　meta name="format-detection" content="adress=no"

告诉你们个双喜临门的好事儿，把网页保存到桌面上，直接在大电视上看！切记把那个”Apple-Mobile-Web-App-Capable”设一下，就能让手机里那些碍眼的按钮通通消掉。内容属性太多选项是不是头大？其实选”yes”或”no”就行，要是选”no”的话，连边框都没了，是不是美极了？

你知道那些五彩斑斓的代码有什么妙用吗？就是为了让我们做事情变得简单、提升网站或者APP性能。比如，当你使用搜索引擎时，关键词和解释能让找东西快又准；当你做网页或APP时，调整下viewport，就能让页面在任何屏幕上都美美的显示啦；还有，多亏了格式校验功能，打电话、收email都方便得很呐！所以，搞网页设计时可要注意利用好这些代码！今天的分享就到这儿！希望你们有所收获。如果还有疑问，随时找我解答，别忘了点赞表扬我下次再聊！