热门关键字:
jquery > jquery教程 > jquery教程 > html5手机页面的那些meta

html5手机页面的那些meta

440
作者:管理员
发布时间:2021/4/19 19:18:56
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=4501
  一、普通手机页的设置


  1.<meta name="viewport" content=""/>说明:屏幕的缩放


  完整案例:


  2.name之format-detection忽略电话号码和邮箱


  也可以写成:


  3.name之设置作者姓名及联系方式


  4.其他


  二、iOS系统的meta设置:


  1、开启对web app程序的支持


  <meta name="apple-mobile-web-app-capable" content="yes">


  说明:


  2、 改变顶部状态条的颜色;


  <meta name="apple-mobile-web-app-status-bar-style" content="black" />


  说明:


  3、设置“添加到主屏幕图标


  Safari 浏览器有一个“添加到主屏幕”的功能,用户可以像保存书签一样把一个网站添加到主屏幕,下次用户直接点击主屏幕上的图标就能进入网站。


  这个功能不仅方便用户快速访问我们的网站,而且也使我们的 WebApp 更像一个原生应用


  因为 iOS 分辨率,所以 icon.png 图片的尺寸也各不相同,我们可以通过sizes属性来分别定义,iOS 系统会自动获取向匹配的图片:


  扩展:


  为用户加上提示


  通过添加一个JavaScript代码来邀请用户添加到主屏幕,该库使用了HTML5的本地存储跟踪是否已经显示过了,以避免重复出现。


  目前使用比较多和有在更新的一个库来自这里:


  4、设置桌面图标的标题


  为了在主屏达到最好的显示效果,title最好限制在六个中文长度内,超长的内容会被隐藏:


  5、设置启动画面


  当用户点击主屏图标打开 WebApp 时,系统会展示启动画面,在未设置情况下系统会默认显示该网站的首页截图,当然这个体验不是很好,所以我们需要通过以下代码来自定义启动画面:


  根据 iOS 设备的分辨率,其启动画面的图片尺寸也各不相同所以:


  或者以下代码,具体没有实践,还需考证


  6、 添加智能 App 广告条 Smart App Banner(iOS 6+ Safari)


  比较常用的meta


  或者说


  整理====


  meta属性在HTML中占据了很重要的位置。如:针对搜索引擎的SEO,文档的字符编码,设置刷新缓存等。虽然一些网页可能没有使用meta,但是作为正规军,我们还是有必要了解一些meta的属性,并且能够熟练使用它们。




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐