• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 移动端html5 meta标签的神奇功效

移动端html5 meta标签的神奇功效

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含meta标签,移动端meta标签,html5,meta标签等相关知识,佚名 希望在学习及工作中可以帮助到您

制作手机版网站的时候,除了页面简洁、操作方便等访问者可以看到的地方以外,就是 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 标签也最终成为用于识别移动内容的另一种方法,但是该标签的缺点是,特定的宽度必须给出,再次,这个标签的支持情况也是未知的:

您可能想查找下面的文章:

  • HTML5各种头部meta标签的功能(推荐)
  • 移动端html5 meta标签的神奇功效
  • 详解HTML5头部meta标签的功能
  • HTML5实践-在非响应式设计中如何使用ViewPort meta标签的方法介绍
  • H5各种头部meta标签的功能示例代码分析
  • 移动端html5 meta标签的神奇功效_html5教程技巧

相关文章

  • 2017-08-06HTML5 新旧语法标记对我们有什么好处
  • 2018-12-03phonegap实现提示操作详解
  • 2018-12-03如何解决滚动条样式问题
  • 2018-12-03利用HTML5 从视频中捕获静止图像实例代码
  • 2018-12-03HTML5中对class属性的解释与规定
  • 2018-12-03详解html5 Canvas drawing的示例代码 (二)
  • 2018-12-03css3+javascript怎么做一个旋转的3d盒子?
  • 2018-12-03基于HTML5 Notifications API的消息通知插件
  • 2018-12-03history解决ajax出现的问题
  • 2017-08-06H5 meta小结(前端必看篇)

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • html5教程制作简单画板代码分享
    • Html5插件教程之添加浏览器放大镜效果的商品橱窗_html5教程技巧
    • HTML在线编辑器的调用方法和使用方法
    • 响应式布局、移动端布局,有什么区别?
    • HTML5 Canvas中使用用路径描画圆弧
    • 你遇到过哪些质量比较高的前端面试问题?
    • canvas原生实现前端网页移动端签名
    • Range:HTML5中的新型Input类型
    • 详解HTML5中的拖放事件(Drag 和 drop)
    • html5定位获取当前位置并在百度地图上显示

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有