您的位置：首页 > Web前端 > HTML5

html运用(二) html5前端开发基础–html5 meta全解

2016-04-12 09:49 543 查看


一、大众机型常用标签的设置


1、name之viewport

<metaname="viewport"content="">


说明：屏幕的缩放

content的几个属性：

widthviewport的宽度[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低像素密度

完整案例：

<metaname=“viewport”content=“width=device-width,height=device-height,user-scalable=no,initial-scale=1,minimum-scale=1,maximum-scale=1,target-densitydpi=device-dpi“>


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

<metaname=”format-detection”content=”telephone=no”>

说明：忽略页面中的数字识别为电话号码

<metaname=”format-detection”content=”email=no”/>

说明：忽略页面中的邮箱格式为邮箱

也可以写成：
<metaname=“format-detection”content=“telphone=no,email=no”/>


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

说明：设置作者姓名及联系方式

<metaname=”author”contect=”name,xxx@163.com”/>


4、其他

<!--声明文档使用的字符编码-->
<metacharset='utf-8'>
<!–优先使用IE最新版本和Chrome–>
<metahttp-equiv=”X-UA-Compatible”content=”IE=edge,chrome=1″/>

<!–页面描述–>
<metaname=”description”content=”不超过150个字符”/>

<!–页面关键词–>
<metaname=”keywords”content=””/>

<!–搜索引擎抓取–>
<metaname=”robots”content=”index,follow”/>

<!–启用360浏览器的极速模式(webkit)–>
<metaname=”renderer”content=”webkit”>

<!–避免IE使用兼容模式–>
<metahttp-equiv=”X-UA-Compatible”content=”IE=edge”>

<!–不让百度转码–>
<metahttp-equiv=”Cache-Control”content=”no-siteapp”/>

<!–针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓–>
<metaname=”HandheldFriendly”content=”true”>

<!–微软的老式浏览器–>
<metaname=”MobileOptimized”content=”320″>

<!–uc强制竖屏–>
<metaname=”screen-orientation”content=”portrait”>
<!–QQ强制竖屏–>

<metaname=”x5-orientation”content=”portrait”>
<!–UC强制全屏–>
<metaname=”full-screen”content=”yes”>
<!–QQ强制全屏–>

<metaname=”x5-fullscreen”content=”true”>
<!–UC应用模式–>
<metaname=”browsermode”content=”application”>
<!–QQ应用模式–>
<metaname=”x5-page-mode”content=”app”>

<!–添加RSS订阅–>
<linkrel=”alternate”type=”application/rss+xml”title=”RSS”href=”/rss.xml”/>

<!–添加faviconicon–>
<linkrel=”shortcuticon”type=”image/ico”href=”/favicon.ico”/>

<!–sns社交标签begin–>
<!–参考微博API–>
<metaproperty=”og:type”content=”类型”/>
<metaproperty=”og:url”content=”URL地址”/>
<metaproperty=”og:title”content=”标题”/>
<metaproperty=”og:image”content=”图片”/>
<metaproperty=”og:description”content=”描述”/>
<!–sns社交标签end–>

<!–Windows8磁贴颜色–>
<metaname=”msapplication-TileColor”content=”#000″/>
<!–Windows8磁贴图标–>
<metaname=”msapplication-TileImage”content=”icon.png”/>

<!–windowsphone点击无高光–>
<metaname=”msapplication-tap-highlight”content=”no”>



二、ios系统的meta/link设置：


1、开启对webapp程序的支持

<metaname=”apple-mobile-web-app-capable”content=”yes”>

说明：

网站开启对webapp程序的支持，其实意思就是删除默认的苹果工具栏和菜单栏，全屏播放，开启全屏显示。设置完成后js可以通过访问只读属性window.navigator.standalone（boolean）来判断是否进入webapp展示状态。


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

<metaname=”apple-mobile-web-app-status-bar-style”content=”black”/>

说明：

在webapp应用下状态条（屏幕顶部条）的颜色；

默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）；


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

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

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



因为iOS分辨率，所以icon.png图片的尺寸也各不相同，我们可以通过
sizes


属性来分别定义，iOS系统会自动获取向匹配的图片：
<!--iOS图标begin-->


<linkrel=“apple-touch-icon-precomposed”href=“/apple-touch-icon-57×57-precomposed.png”/>

<!–iPhone和iTouch，默认57×57像素，必须有–>

<linkrel=“apple-touch-icon-precomposed”sizes=“114×114”href=“/apple-touch-icon-114×114-precomposed.png”/>

<!–RetinaiPhone和RetinaiTouch，114×114像素，可以没有，但推荐有–>

<linkrel=“apple-touch-icon-precomposed”sizes=“144×144”href=“/apple-touch-icon-144×144-precomposed.png”/>

<!–RetinaiPad，144×144像素，可以没有，但推荐有–>

<!–iOS图标end–></span>

添加到主屏幕后系统会默认给图片加上IOS相关的图标风格（比如圆角），如果需要系统直接展示原图使用apple-touch-icon-precomposed，如果需要系统添加风格使用apple-touch-icon。

扩展：


为用户加上提示

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

目前使用比较多和有在更新的一个库来自这里：http://cubiq.org/add-to-home-screen


4、设置桌面图标的标题，

为了在主屏达到最好的显示效果，
title


最好限制在六个中文长度内，超长的内容会被隐藏：



添加到主屏后的标题（iOS6新增）


<spanstyle=“font-size:14px;”><metaname=“apple-mobile-web-app-title”content=“标题”></span>


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


<linkrel=“apple-touch-startup-image”href=“Startup.png”/>

根据iOS设备的分辨率，其启动画面的图片尺寸也各不相同所以：
<!--iOS启动画面begin-->


<linkrel=“apple-touch-startup-image”sizes=“768×1004”href=“/splash-screen-768×1004.png”/>

<!–iPad竖屏768x1004（标准分辨率）–>

<linkrel=“apple-touch-startup-image”sizes=“1536×2008”href=“/splash-screen-1536×2008.png”/>

<!–iPad竖屏1536×2008（Retina）–>

<linkrel=“apple-touch-startup-image”sizes=“1024×748”href=“/Default-Portrait-1024×748.png”/>

<!–iPad横屏1024×748（标准分辨率）–>

<linkrel=“apple-touch-startup-image”sizes=“2048×1496”href=“/splash-screen-2048×1496.png”/>

<!–iPad横屏2048×1496（Retina）–>

<linkrel=“apple-touch-startup-image”href=“/splash-screen-320×480.png”/>

<!–iPhone/iPodTouch竖屏320×480(标准分辨率)–>

<linkrel=“apple-touch-startup-image”sizes=“640×960”href=“/splash-screen-640×960.png”/>

<!–iPhone/iPodTouch竖屏640×960(Retina)–>

<linkrel=“apple-touch-startup-image”sizes=“640×1136”href=“/splash-screen-640×1136.png”/>

<!–iPhone5/iPodTouch5竖屏640×1136(Retina)–>

<!–iOS启动画面end–>

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


<!!–iPhoneSPLASHSCREEN–>

<!linkhref=”http://wlog.cn/html/”apple-touch-startup-image-320×460.png”media=“(device-width:320px)”rel=“apple-touch-startup-image”/>

<!!–iPhone(Retina)SPLASHSCREEN–>

<!linkhref=“apple-touch-startup-image-640×920.png”media=“(device-width:320px)and(-webkit-device-pixel-ratio:2)”rel=“apple-touch-startup-image”/>

<!!–iPad(portrait)SPLASHSCREEN–>

<!linkhref=“apple-touch-startup-image-768×1004.png”media=“(device-width:768px)and(orientation:portrait)”rel=“apple-touch-startup-image”/>

<!!–iPad(landscape)SPLASHSCREEN–>

<!linkhref=“apple-touch-startup-image-748×1024.png”media=“(device-width:768px)and(orientation:landscape)”rel=“apple-touch-startup-image”/>

<!!–iPad(Retina,portrait)SPLASHSCREEN–>

<!linkhref=“apple-touch-startup-image-1536×2008.png”media=“(device-width:1536px)and(orientation:portrait)and(-webkit-device-pixel-ratio:2)”rel=“apple-touch-startup-image”/>

<!!–iPad(Retina,landscape)SPLASHSCREEN–>

<linkhref=”apple-touch-startup-image-1496×2048.png”media=”(device-width:1536px)and(orientation:landscape)and(-webkit-device-pixel-ratio:2)”rel=“apple-touch-startup-image”/>

6、添加智能App广告条SmartAppBanner（iOS6+Safari）


<metaname=“apple-itunes-app”content=“app-id=myAppStoreID,affiliate-data=myAffiliateData,app-argument=myURL”>


比较常用的meta
以下代码参考网址：view-source:三个w点adinnet点cn斜杠service斜杠3d点html

<!--[ifltIE7]><htmlclass="oldieieie6"><![endif]-->
<!–[ifIE7]><htmlclass=”oldieieie7″><![endif]–>

<!–[ifIE8]><htmlclass=”ieie8″><![endif]–>

<!–[if(gteIE9)|!(IE)]><!–><html><!–<![endif]–>

<head>

<metahttp-equiv=“Content-Type”content=“text/html;charset=utf-8”>

<title></title>

<metaname=“keywords”content=“”/>

<metaname=“description”content=“”/>

<metaname=“title”content=“”/>

<metaname=“author”content=“-06”/>

<metaname=“Copyright”content=“”/>

<!–让IE浏览器用最高级内核渲染页面还有用Chrome框架的页面用webkit内核

==================================================—>

<metahttp-equiv=“X-UA-Compatible”content=“IE=edge,chrome=1”>

<!–IOS6全屏Chrome高版本全屏

==================================================—>

<metaname=“apple-mobile-web-app-capable”content=“yes”>

<metaname=“mobile-web-app-capable”content=“yes”>

<!–让360双核浏览器用webkit内核渲染页面

==================================================—>

<metaname=“renderer”content=“webkit”>

<!–MobileSpecificMetas

==================================================—>

<!–!!!注意minimal-ui是IOS7.1的新属性，最小化浏览器ui–>

<metaname=“viewport”content=“width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,minimal-ui”>

<metaname=“format-detection”content=“telephone=no”>

<!–CSS

==================================================—>

<linkhref=“/css/reset.css”rel=“stylesheet”type=“text/css”>

<linkhref=“/css/magicwall.css”rel=“stylesheet”type=“text/css”>

<linkhref=“/css/jquery.gridster.css”rel=“stylesheet”type=“text/css”>

<linkhref=“/css/case.css”rel=“stylesheet”type=“text/css”>

<linkhref=“/css/case_1280.css”rel=“stylesheet”type=“text/css”>

<linkhref=“/css/case_1024.css”rel=“stylesheet”type=“text/css”>

<linkhref=“/css/case_640.css”rel=“stylesheet”type=“text/css”>

<linkhref=“/css/case_320.css”rel=“stylesheet”type=“text/css”>

<linkhref=“/css/style_retina.css”rel=“stylesheet”type=“text/css”>

<!–[ifltIE9]>

<scriptsrc=“http://cdn.bootcss.com/html5shiv/r29/html5.js”></script>

<![endif]–>

<!–Favicons

==================================================—>

<linkrel=“shortcuticon”href=“favicon.ico”>

<!–Android主屏图标

==================================================—>

<linkrel=“icon”sizes=“196×196”href=“/images/apple-touch-icon-152×152.png”>

<!–IOS主屏图标

==================================================—>

<linkrel=“apple-touch-icon-precomposed”href=“/images/apple-touch-icon-76×76.png”>

<linkrel=“apple-touch-icon-precomposed”sizes=“76×76”href=“/images/apple-touch-icon-76×76.png”>

<linkrel=“apple-touch-icon-precomposed”sizes=“120×120”href=“/images/apple-touch-icon-120×120.png”>

<linkrel=“apple-touch-icon-precomposed”sizes=“152×152”href=“/images/apple-touch-icon-152×152.png”>

<linkrel=“apple-touch-startup-image”href=“/startup-748×1024.jpg”

media=“screenand(min-device-width:481px)and(max-device-width:1024px)and(orientation:landscape)”>

<linkrel=“apple-touch-startup-image”href=“/startup-768×1004.jpg”

media=“screenand(min-device-width:481px)and(max-device-width:1024px)and(orientation:portrait)”>


或者说

<!--启用360浏览器的极速模式(webkit)-->

<metaname="renderer"content="webkit">

<!--避免IE使用兼容模式-->

<metahttp-equiv="X-UA-Compatible"content="IE=edge">

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

<metaname="HandheldFriendly"content="true">

<!--微软的老式浏览器-->

<metaname="MobileOptimized"content="320">

<!--uc强制竖屏-->

<metaname="screen-orientation"content="portrait">

<!--QQ强制竖屏-->

<metaname="x5-orientation"content="portrait">

<!--UC强制全屏-->

<metaname="full-screen"content="yes">

<!--QQ强制全屏-->

<metaname="x5-fullscreen"content="true">

<!--UC应用模式-->

<metaname="browsermode"content="application">

<!--QQ应用模式-->

<metaname="x5-page-mode"content="app">

<!--windowsphone点击无高光-->

<metaname="msapplication-tap-highlight"content="no">

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航