移动开发与响应式

一、移动开发常用技巧

　[ViewPort基本知识]

　　设置布局ViewPort的各种信息：

　　1.width=device-width； 设置viewpoint视口宽度等于设备宽度；

　　2.initial-scale=1； 网页默认缩放比为1(网页在手持设备上，不会进行默认缩放)

　　3.minimum-scale=1 网页最小缩放比为1

　　4.maximum-scale=1 网页最大缩放比为1

　　5.user-scalable=no 禁止用户手动缩放网页的 (IOS10+ 的设备失效)

 

在手机站以及响应式网站的制作中，网页必须添加下述viewpoint的设置语句

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

禁止设备将手机号、邮箱进行识别，取消点击拨打电话等事件。

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

iOS 添加到主屏幕时，WebAPP的标题

<meta name="apple-mobile-web-app-title" content="标题">

IOS添加到主屏幕时，启用WebAPP的全屏模式，删除顶端地址栏和底部工具栏

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

IOS 添加到主屏幕时，WebApp的顶部状态栏颜色：
black：黑色
white：白色
black-translucent: 半透明。 (当设置为半透明时，网页将充满整个屏幕，顶部透明的状态栏将盖住网页最上方一小条)

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

IOS添加到主屏幕时，WebAPP的图标

<link rel="apple-touch-icon-precomposed" href="" />

设置浏览器，使用最新的IE或Chrome去编译；
>>> 这句设置语句，不是手机端专用，一般PC网页均需要设置。

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

    [手机端字体样式]

　　1、一般手机端不支持微软雅黑字体。

　　2、中文字体一般不设置，使用系统默认即可。

　　3、英文字体一般设置为font-family: helvetica;

1、设置用户不能选中文本；

　　1、手机端不能长按选择；

　　2、PC端不能用鼠标选择；

-webkit-user-select: none;
-moz-user-select: none;

2、去除表单的默认外观，手机、PC均可使用

appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
color:red;

设置placeholder的属性

input::-webkit-input-placeholder {
color: red;
}
input:focus::-webkit-input-placeholder {
color: blue;
}
input:-ms-input-placeholder { // IE10+
color: red;
}
input:-moz-placeholder { // Firefox4-18
color: red;
}
input:focus::-moz-placeholder { // Firefox19+
color: red;
}

禁止超链接和图片，长按时弹出菜单

-webkit-appearance:none;

二、响应式布局

一、如何实现网页的响应式

三种方式：

1、媒体查询(在下面)

2、百分比自适应布局

　　①允许网页宽度自动调整

　　　　首先，在网页代码的头部，加入一行viewport元标签。

　　代码：

　　　　<meta name="viewport" content="width=device-width, initial-scale=1" />

　　　　viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

　　②不使用绝对宽度！！！

　　　　由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。

　　　　具体说，CSS代码不能指定像素宽度

　　　　只能指定百分比宽度或者让宽度自适应。

　　③同样字体也不能使用绝对大小（px），而只能使用相对大小（em）。

3、使用JS根据浏览器设备引用不同的CSS值。

二、[使用媒体查询的三种方式]

1、直接在CSS中使用

写法： @media 类型（常选all/screen）and (条件1)and (条件2){

             CSS选择器{

             CSS属性值

               }

             }

2、使用link链接CSS,media属性可以设置媒体查询方式：

<link rel="stylesheet" type="text/css" href="CSS文件夹/02-响应式布局.css"

media="all and (max-width: 800px)"/>

3、使用inport导入，直接在url()后面使用空格，间隔媒体查询规则：（不太常用）

eg: @import url("css/02-响应式布局.css") all and (max-width: 800px);