• WebApp网站有关meta标签 2015-11-12 16:03:09
    一、大众机型常用meta标签name的设置 1、name之viewport 说明:屏幕的缩放content的几个属性: width viewport的宽度[device-width | pixel_value]width如果直接设置pixel_value数值,大部分的安卓手机不支持...
    一、大众机型常用meta标签name的设置
    1、name之viewport
    
    说明:屏幕的缩放
    
    content的几个属性:
        width viewport的宽度[device-width | pixel_value]width如果直接设置pixel_value数值,大部分的安卓手机不支持,但是ios支持;
        height – viewport 的高度 (范围从 223 到 10,000 )
        user-scalable [yes | no]是否允许缩放
        initial-scale [数值] 初始化比例(范围从 > 0 到 10)
        minimum-scale [数值] 允许缩放的最小比例
        maximum-scale [数值] 允许缩放的最大比例
        target-densitydpi 值有以下(一般推荐设置中等响度密度或者低像素密度,后者设置具体的值dpi_value,另外webkit内核已不准备再支持此属性)
             -- dpi_value 一般是70-400//没英寸像素点的个数
             -- device-dpi设备默认像素密度
             -- high-dpi 高像素密度
             -- medium-dpi 中等像素密度
             -- low-dpi 低像素密度
    
    完整案例:
    
    ```
      
    ```
    2、name之format-detection忽略电话号码和邮箱
    
    说明:忽略页面中的数字识别为电话号码
    
    说明:忽略页面中的邮箱格式为邮箱
    也可以写成:
    
    ```
      
    ```
    3、name之设置作者姓名及联系方式
    说明:设置作者姓名及联系方式
    
    
    4、其他
        
        
    
        
        
    
        
        
    
        
        
    
        
        
    
        
        
    
        
        
    
        
        
    
        
        
    
        
        
    
        
        
        
    
        
        
        
        
    
        
        
        
        
        
       
    
        
        
    
        
        
    
    
        
            
            
            
            
            
            
        
    
    
        
        
        
        
    
         
        
    
    二、ios系统的meta/link设置:
    1、开启对web app程序的支持
    
    说明:
        网站开启对web app程序的支持,其实意思就是删除默认的苹果工具栏和菜单栏,开启全屏显示
    2、 改变顶部状态条的颜色;
    
    说明:
        在 web app 应用下状态条(屏幕顶部条)的颜色;
        默认值为 default(白色),可以定为 black(黑色)和 black-translucent(灰色半透明);
    
    
    3、设置“添加到主屏幕图标
    Safari 浏览器有一个“添加到主屏幕”的功能,用户可以像保存书签一样把一个网站添加到主屏幕,下次用户直接点击主屏幕上的图标就能进入网站。
    这个功能不仅方便用户快速访问我们的网站,而且也使我们的 WebApp 更像一个原生应用
    ![这里写图片描述](https://img-blog.csdn.net/20151112155648138)
    因为 iOS 分辨率,所以 icon.png 图片的尺寸也各不相同,我们可以通过sizes属性来分别定义,iOS 系统会自动获取向匹配的图片:
    
    ```
      
              
              
              
              
              
              
      
    ```
    4、设置桌面图标的标题,
    为了在主屏达到最好的显示效果,title最好限制在六个中文长度内,超长的内容会被隐藏:
    
    ```
    
    ```
    5、设置启动画面
    当用户点击主屏图标打开 WebApp 时,系统会展示启动画面,在未设置情况下系统会默认显示该网站的首页截图,当然这个体验不是很好,所以我们需要通过以下代码来自定义启动画面:
    
    ```
      
    ```
    根据 iOS 设备的分辨率,其启动画面的图片尺寸也各不相同所以:
    
    ```
      
              
              
              
              
              
              
              
              
           
              
              
              
              
              
              
          
    ```
    或者以下代码,具体没有实践,还需考证
    
    ```
      
      
      
      
      
      
      
      
      
      
      
      
    ```
    6、 添加智能 App 广告条 Smart App Banner(iOS 6+ Safari)
    
    ```
      
    ```
    ==================
    比较常用的meta
     以下代码参考网址:view-source:三个w点adinnet点cn斜杠service斜杠3d点html
    
    ```
     
     
     
     
     
    
    
    
    
    
    
    
    
    
    
    
     
    
    
    
    
    
    
    
        
    
    
    
    
    
    
    
    
    
    
    
            
    
    
    
    
    
      
    
    
    
    
    
    
    
    
    
    ```
    或者说
    
    ```
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    ```
    整理====
    meta属性在HTML中占据了很重要的位置。如:针对搜索引擎的SEO,文档的字符编码,设置刷新缓存等。虽然一些网页可能没有使用meta,但是作为正规军,我们还是有必要了解一些meta的属性,并且能够熟练使用它们。 
    1、声明文档使用的字符编码
    
    ```
      
    ```
    2、声明文档的兼容模式
    
    ```
     指示IE以目前可用的最高模式显示内容
    指示IE使用  指令确定如何呈现内容。标准模式指令以IE7 标准模式显示,而 Quirks 模式指令以 IE5 模式显示。
    ```
    3、SEO 优化
    
    ```
    页面描述
    页面关键词
    定义网页作者
    定义网页搜索引擎索引方式,robotterms是一组使用英文逗号「,」分割的值,通常有如下几种取值:none,noindex,nofollow,all,index和follow。
    ```
    4、为移动设备添加 viewport
    
    ```
    
        content 参数解释:
        width       viewport 宽度(数值/device-width)
        height            viewport 高度(数值/device-height)
        initial-scale  初始缩放比例
        maximum-scale  最大缩放比例
        minimum-scale  最小缩放比例
        user-scalable  是否允许用户缩放(yes/no)
        minimal-ui      iOS 7.1 beta 2 中新增属性,可以在页面加载时最小化上下状态栏。这是一个布尔值,可以直接这样写:
    
    ```
    5、iOS 设备
    
    ```
    添加到主屏后的标题(iOS 6 新增)
    是否启用 WebApp 全屏模式
    设置状态栏的背景颜色
        只有在 "apple-mobile-web-app-capable" content="yes" 时生效
        content 参数:
        default 默认值。
        black 状态栏背景是黑色。
        black-translucent 状态栏背景是黑色半透明。
        设置为 default 或 black ,网页内容从状态栏底部开始。
        设置为 black-translucent ,网页内容充满整个屏幕,顶部会被状态栏遮挡。
    ```
    6、iOS 图标 rel 参数
    
    ```
    apple-touch-icon 图片自动处理成圆角和高光等效果。
    apple-touch-icon-precomposed 禁止系统自动添加效果,直接显示设计原图。
    iPhone 和 iTouch,默认 57x57 像素,必须有
    iPad,72x72 像素,可以没有,但推荐有
    Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有
    Retina iPad,144x144 像素,可以没有,推荐大家使用
    title最好限制在六个中文长度内,超长的内容会被隐藏,添加到主屏后的标题(iOS 6 新增)
    ```
    7、iOS 启动画面
    
    ```
    iPad 的启动画面是不包括状态栏区域的。
    iPad 竖屏 768 x 1004(标准分辨率)
    iPad 竖屏 1536x2008(Retina)
    iPad 横屏 1024x748(标准分辨率)
    iPad 横屏 2048x1496(Retina)
    
    iPhone 和 iPod touch 的启动画面是包含状态栏区域的。
    iPhone/iPod Touch 竖屏 320x480 (标准分辨率)
    iPhone/iPod Touch 竖屏 640x960 (Retina)
    iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)
    
      当用户点击主屏图标打开 WebApp 时,系统会展示启动画面,在未设置情况下系统会默认显示该网站的首页截图,当然这个体验不是很好
    ```
    8、Windows 8
    
    ```
     Windows 8 磁贴颜色
    Windows 8 磁贴图标
    ```
    9、不常用的
    
    ```
    添加 RSS 订阅
    添加 favicon icon
    禁止数字识自动别为电话号码
    不让android识别邮箱
    启用360浏览器的极速模式(webkit)
    避免IE使用兼容模式
    针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓
    微软的老式浏览器
    QQ强制竖屏
    UC强制全屏
    QQ强制全屏
    UC应用模式
    QQ应用模式
    禁止百度转码
    windows phone 点击无高光
      关键字
      描述
      标题
      作者
      公司
       让IE浏览器用最高级内核渲染页面 还有用 Chrome 框架的页面用webkit 内核 
      IOS6全屏
      Chrome高版本全屏
      让360双核浏览器用webkit内核渲染页面
     添加智能 App 广告条 Smart App Banner(iOS 6+ Safari)
    ```
    10、sns 社交标签 
    参考微博API
    
    ```
    
    
    
    
    
    ```
    
    
    文章来源:
    http://blog.csdn.net/kongjiea/article/details/17092413
    
    参考地址:
    http://blog.163.com/yin_1989/blog/static/1749132082013071924352/
    http://blog.sina.com.cn/s/blog_5a073f0f01014jfc.html
    http://www.cocoachina.com/programmer/20130521/6249.html
    展开全文
  • webapp开发初期,会碰到在pc端开发好的页面在移动端显示过大的问题,这里需要在html head中加入meta标签来控制缩放 <meta name=" viewport" content="width=device-width initial-scale=1.0 minimum-scale=1.0 ...
  • meta标签的作用及整理 2016-05-09 21:00:05
    一方面不是很了解meta标签的用途,另一方面是对于meta标签里的属性和值不是懂,也不知道从哪里冒出来的,所以这篇文章专门整理下meta标签,一个必用且关键的标签。什么是meta标签?引自下W3school的定义说明一下。 ...
  • WebAppMeta标签 2014-11-15 09:49:59
    一定对meta有种特殊的感情吧,今天我们就来说说移动平台的meta标签,在移动平台meta标签究竟有 哪些神奇的功效呢? 1、Meta 之 viewport 说到移动平台meta标签,那就不得不说一下viewport了,那么什么是viewport...
  • meta标签 2018-01-15 18:14:03
    对于很多初学者而言,可能对meta标签的作用不是很理解,这里我总结一下我学习过程中对meta标签的理解和总结,希望能帮到更多的和我一样爱学习的人。 一、什么是meta标签? 总的来说meta标签提供关于 HTML 文档的...
  • 一、 meta 中的viewport <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏、...
  • meta标签及其含义大全 2017-06-14 15:38:06
    meta运用在head标签中,但是对于H5中meta标签元素的定义已经运用场景没有几个人能够说是熟练运用的,现在我就来罗列html中meta标签的定义以及运用场景。定义和用法:<meta> 元素可提供有关页面的元信息(meta-...
  • 1.先说说mate标签里的viewport: viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏、状态栏、滚动条等等之后用于看网页的区域。对于传统WEB页面来说,980的宽度在iphone上显示是很正常的...
  • HTML中meta标签详解 2020-05-28 16:39:10
    meta标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。(该内容来自:...
  • 基本标签  &lt;! - 声明文档使用的字符编码 - &gt;  &lt;meta charset =“utf-8”/&gt;  &lt;! - 优先使用IE最新版本和Chrome - &gt;   &lt;meta http-equiv =“X-UA-...
  • 总结一下webAppmeta标签
  • 1、定义 &lt;...meta里的数据是供机器解读的,告诉机器该如何解析这个页面,还有一个用途是可以添加服务器发送到浏览器的http头部内容,例如我们为页面中添加如下meta标签: &lt;meta...
  • &lt;!...gt; &...meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0
  • 关于h5中meta标签的使用 2016-02-01 10:34:30
    制作手机版网站的时候,...对于桌面平台web布局中大家对meta标签再熟悉不过了,它永远位于 head 元素内部,做SEO的朋友一定对meta有种特殊的感情吧,之前HTML5中国分享过Meta标签与搜索引擎优化一文,文中列举出网页
  • 常用HTML meta 标签属性(网站兼容与优化需要),meta标签 标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或...
  • 移动端meta标签 2018-01-27 13:13:01
    移动端meta标签 移动端meta标签的作用,内容,content有几种类型的值 meta charset="UTF-8"> meta http-equiv="content-type" content="text/html"> meta name="keywords" content=""/> meta name=...
1 2 3 4 5 ... 20
收藏数 9,739
精华内容 3,895
热门标签