移动端-Meta与视口的设置

Meta与视口的设置上

1. PC端常见的mata定义
   定义该页面使用字符编码：
   <meta charset="utf-8">

<title>全栈开发</title>

	title标记内容的长度不要超过80个汉字
keywords关键词：<meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,">告诉搜索引擎你的页面关键字是什么
description定义网页描述：<meta name="description" content="专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">
你的这个页面是干什么的 搜索引擎知道你的页面是干什么的 是meta标签来描述的
name:定义名称
content:对名称的解释描述

generator用于说明网站制作生成工具

	<meta name="generator" content="Microsoft"/>

revised 网页文档的修改时间

	<meta name="revised" content="设计网, 6/24/2015"/>

Meta与视口的设置-下

1. 移动端常见mata定义视口设置与设备的缩放

使用meta 适应移动端

移动端meta定义视口设备的缩放

<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">

移动端meta定义视口设备禁止缩放

<meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

禁止自动的识别电话和邮箱 format-detection 格式检测

 <meta name="format-detection" content="telephone=no, email=no" />

全屏

<meta name="apple-touch-fullscreen" content="yes">

2. 移动端viewport

viewport:移动端设备浏览窗口
device-width 设备宽度
initial-scale=1:默认的缩放比例
minimum-scale=1;最小缩放比例1
maximum-scale=1;最大缩放比例
user-scalable=no用户是否可以缩放

3. 解决个别机型的问题（例如：苹果手机）

显示苹果的工具栏

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

苹果状态栏变成黑色

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