• 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
    展开全文
  • <!...gt; &...meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0
  • webapp开发初期,会碰到在pc端开发好的页面在移动端显示过大的问题,这里需要在html head中加入meta标签来控制缩放 <meta name=" viewport" content="width=device-width initial-scale=1.0 minimum-scale=1.0 ...
  • WebAppMeta标签 2014-11-15 09:49:59
    一定对meta有种特殊的感情吧,今天我们就来说说移动平台的meta标签,在移动平台meta标签究竟有 哪些神奇的功效呢? 1、Meta 之 viewport 说到移动平台meta标签,那就不得不说一下viewport了,那么什么是viewport...
  • 1、WebApp全屏模式: 注意:viewport 后面加上 minimal-ui 在safri 体现效果   2、隐藏状态栏/设置状态栏颜色: meta name="apple-mobile-web-app-status-bar-style" content="black-...
  • 1.先说说mate标签里的...对于传统WEB页面来说,980的宽度在iphone上显示是很正常的,也是满屏的,但对于webapp而言,可能就有点问题了,在iphone上我们的webapp在竖屏下通常宽度都是320。 因此我们必须改变viewpo
  • 一、 meta 中的viewport <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏、...
  • WebApp <meta>函数 2016-08-18 10:52:52
    viewpor: 可是区域   width: viewport 的宽度 (范围从 200 到 10,000 ,默认为 980 像素 )  height: viewport 的高度 (范围从 223 到 10,000 ) ... initial-scale: 初始的缩放比例 (范围从>0到 10 ) ...
  • 1、WebApp全屏模式: <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui"> 注意:viewport 后面加上minimal-...
  • 1、创建maven项目,Packaging选war,可以自动生成webapp,填写好以后点击Finish 2、右键点击项目,选中Properties→Project Facets 3、先勾掉Dynamic Web Module,Java选为自己的安装的版本,点击Apply 4、在勾选...
  • 总结一下webAppmeta标签。
  • WebApp开发Meta标签解析 2016-11-10 19:19:15
    WebApp全屏模式:<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">注意:viewport 后面加上 minimal-ui 在safri 体现...
  • webapp中的meta 2019-08-03 22:32:06
    meta http-equiv="Pragma" name="no-store" /><!--必须联网才可以访问--><meta http-equiv="Cache-Control" name="no-store" /><!--浏览器缓存--><meta http-equiv="refresh" conte...
  • IOS WebAppmeta 标签 2017-09-18 11:30:13
    apple-mobile-web-app-capable 设置Web应用是否以全屏模式运行。 语法:说明:如果content设置为yes,Web应用会以全屏模式运行,反之,则不会。content的默认值是no,表示正常显示。你可以通过只读属性window....
  • webapp开发需要设置的meta 2019-07-26 18:06:36
    我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用 1 <meta content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;” name=”...
  • WebApp常见meta标签 2014-11-12 17:21:58
    meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。 默认值为default(白色),可以定为black(黑色)和...
1 2 3 4 5 ... 20
收藏数 28,020
精华内容 11,208
热门标签