制作手机版网站的时候,除了页面简洁、操作方便等访问者可以看到的地方以外,就是 Meta 标签的设置,合理设置 Meta 标签 对手机版网站的搜索引擎优化,手机浏览器的渲染展示都有非常大的帮助。对于桌面平台web布局中大家对meta标签再熟悉不过了,它永远位于 head 元素内部,对做SEO的朋友一定对meta有种特殊的感情吧,今天我们就来说说移动平台的meta标签,在移动平台meta标签究竟有哪些神奇的功效呢?
1、Meta 之 viewport
说到移动平台meta标签,那就不得不说一下viewport了,那么什么是viewport呢?
viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏、状态栏、滚动条等等之后用于看网页的区域
。对于传统WEB页面来说,980的宽度在iphone上显示是很正常的,也是满屏的,但对于webapp而言,可能就有点问题了,在iphone上我们的webapp在竖屏下通常宽度都是320,这时我们320页面在iphone上显示成啥效果呢?有人可能认为iPhone不是320的宽度莫,感觉应该是满屏的吧,事实呢?我们来看一下如下布局在iPhone上的显示情况
好了,我们就可以按全屏来布局我们的页面了,不用再担心页面显示的很小了!
2、Meta 之 format-detection
你明明写的一串数字没加链接样式,而iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号!想去掉这个拨号链接该如何操作呢?这时我们的meta又该大显神通了,代码如下:
telephone=no就禁止了把数字转化为拨号链接!
telephone=yes就开启了把数字转化为拨号链接,要开启转化功能,这个meta就不用写了,在默认是情况下就是开启!
3、Meta 之 apple-mobile-web-app-capable
<meta name=”apple-mobile-web-app-capable” content=”yes” />
这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。
4、Meta 之 apple-mobile-web-app-status-bar-style
作用是控制状态栏显示样式
MobileOptimized
这是一个 Windows 专有的 meta 标签也最终成为用于识别移动内容的另一种方法,但是该标签的缺点是,特定的宽度必须给出,再次,这个标签的支持情况也是未知的:
域名 持有者实名认证有什么意义?从个人角度来讲,对域名所有者实名认证后,域名...
最近看到vue-router的HTML5 History 模式路由的实现,然后顺便又去研究了一下HTM...
做一个淘宝的留白: 当你在缩小浏览器页面的时候他的内容区并没有缩小,是留白的...
这篇《Java 基础知识总结》是 JavaGuide 上阅读量最高的一篇文章,由于我对其进...
Tables的缺点 1、Table要比其它html标记占更多的字节。(延迟下载时间,占用服务...
简介: 7 月 10 日, CNCF Sandbox 项目 OpenKruise 作者 社区负责人、阿里云技...
摩尔定律不再适用 从2004年伟创力(Flextronics)收购 Frog 设计公司开始,过去 10...
得物App内h5的项目都是通过webview打开。对于webview的性能大家普遍的印象就是打...
SASS 中定义的变量,后设置的值会覆盖旧的值。 $color: red;$color: blue;.btn {...
初始时,多个列内容大小不同,高度不同。现在需要设置不同的背景来显示,而且各...