欢迎访问融科网络!我们专注于郑州网站建设郑州网站制作郑州网站设计郑州做网站等相关服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行

建站知识

手机手机端网页的头部标签和 meta该如何写比较好?

标签: 作者:融科网络 | 点击:
05

Nov
2019

导语
手机手机端网页的头部标签和meta该如何写比较好? 做网页(ppssdd.com)编者注:替换以下《》,即可放入网页正常使用。meta标签对手机端网页同样有很大的作用,那么该怎么写比较
 

手机手机端网页的头部标签和 meta该如何写比较好?

做网页(ppssdd.com)编者注:替换以下《》,即可放入网页正常使用。meta标签对手机端网页同样有很大的作用,那么该怎么写比较好呢?

对于桌面平台web布局中大家对meta标签再熟悉不过了,它永远位于 head 元素内部,对做网站优化的朋友一定对meta有种特殊的感情吧,今天我们就来说说移动平台的meta标签,在移动平台meta标签究竟有哪些神奇的功效呢?

meta 标签包含了 HTTP 标题信息 (http-equiv) 和 页面描述信息 (name)。

http-equiv:

该枚举的属性定义,可以改变服务器和用户代理行为的编译。编译的值取content 里的内容。简单来说即可以模拟 HTTP 协议响应头。


使用 HTML5 doctype,不区分大小写

《!DOCTYPE html》

--------------------------------------------------------------------------------

更加标准的 lang 属性写法 

《html lang="zh-cmn-Hans"》

meta声明文档使用的字符编码

《meta charset='utf-8'》

--------------------------------------------------------------------------------

优先使用 IE 最新版本和 Chrome

《meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/》

--------------------------------------------------------------------------------

页面描述

《meta name="description" content="不超过150个字符"/》

--------------------------------------------------------------------------------

页面Keywords

《meta name="keywords" content=""/》

--------------------------------------------------------------------------------

网页作者

《meta name="author" content="name, 》

--------------------------------------------------------------------------------

搜索引擎抓取

《meta name="robots" content="index,follow"/》

--------------------------------------------------------------------------------

为移动设备添加 viewport

说到移动平台meta标签,那就不得不说一下viewport了,那么什么是viewport呢?

viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏、状态栏、滚动条等等之后用于看网页的区域。对于传统WEB页面来说,980的宽度在iphone上显示是很正常的,也是满屏的,但对于webapp而言,可能就有点问题了,在iphone上我们的webapp在竖屏下通常宽度都是320,这时我们320页面在iphone上显示成啥效果呢?有人可能认为iPhone不是320的宽度莫,感觉需要是满屏的吧,事实呢?

《meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"》

width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边。 

iOS 设备

添加到主屏后的标题(iOS 6 新增)

《meta name="apple-mobile-web-app-title" content="标题"》

--------------------------------------------------------------------------------

是否启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏

《meta name="apple-mobile-web-app-capable" content="yes"/》

--------------------------------------------------------------------------------

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

《meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=my网址"》      

--------------------------------------------------------------------------------

设置苹果工具栏色彩

《meta name="apple-mobile-web-app-status-bar-style" content="black"/》

--------------------------------------------------------------------------------

忽略页面中的数字识别为电话,忽略邮箱识别

《meta name="format-detection" content="telphone=no, 邮箱=no"/》

--------------------------------------------------------------------------------

启用360浏览器的极速模式(webkit)

《meta name="renderer" content="webkit"》

--------------------------------------------------------------------------------

避免IE使用兼容模式

《meta http-equiv="X-UA-Compatible" content="IE=edge"》

--------------------------------------------------------------------------------

针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓

《meta name="HandheldFriendly" content="true"》

--------------------------------------------------------------------------------

微软的老式浏览器

《meta name="MobileOptimized" content="320"》

--------------------------------------------------------------------------------

uc强制竖屏

《meta name="screen-orientation" content="portrait"》

--------------------------------------------------------------------------------

QQ强制竖屏

《meta name="x5-orientation" content="portrait"》

--------------------------------------------------------------------------------

UC强制全屏

《meta name="full-screen" content="yes"》

--------------------------------------------------------------------------------

QQ强制全屏

《meta name="x5-fullscreen" content="true"》

--------------------------------------------------------------------------------

UC应用模式

《meta name="browsermode" content="application"》

--------------------------------------------------------------------------------

QQ应用模式

--------------------------------------------------------------------------------

windows phone 点击无高光

《meta name="msapplication-tap-highlight" content="no"》

--------------------------------------------------------------------------------

iOS 图标
iPhone 和 iTouch,默认 57x57 像素,必须有

《link rel="apple-touch-icon-precomposed" href=""/》

--------------------------------------------------------------------------------

Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有

《link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://www.ppssdd.com/apple-touch-icon-114x114-precomposed.png"/》

--------------------------------------------------------------------------------

Retina iPad,144x144 像素,可以没有,但推荐有

郑州融科网络专注于企业网站建设、网站制作、高端网站设计,郑州荥阳、上街做网站就找融科网络!
本文章网址:http://www.ppssdd.com/website/14911.html。转载请保留出处,谢谢合作!

全网(营销型+响应式)专业定制

快速搭建高询盘+营销独立站

微信扫一扫 添加微信

推荐分享,免费SEO诊断

扫码加好友,即送价值1880元的SEO优化教程

(网站没排名,轻松让关键词上首页!专注H5企业建站+网站优化推广)

上一篇:提交表单时:从客户端中检测到有潜在危险的 request.form值

下一篇:Meta标签中网站内容描述(description)的要点如何写?

  • 网站建设咨询
  • 网站建设案例
建站流程
  • 网站需
    求分析
  • 网站策
    划方案
  • 页面风
    格设计
  • 程序设
    计研发
  • 资料录
    入优化
  • 确认交
    付使用
  • 后续跟
    踪服务
  • 151-3895-5886
  • 品牌网站建设定制
  • 营销型网站建设定制