移动端常用的meta标签，媒体查询以及一些样式设置《转载收藏》

<meta name="screen-orientation" content="portrait">
<meta name="full-screen" content="yes">//开启全屏
<meta name="browsermode" content="application">
<meta name="x5-orientation" content="portrait">
<meta name="x5-fullscreen" content="true">
<meta name="x5-page-mode" content="app">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">

禁止多行文本框textarea拖拽

这样按下面添加属性多行文本框就不能拖拽放大缩小了：

textarea {
resize: none;
}

去除IE10+浏览器文本框后面的小叉叉

只需下面一句就ok了

input::-ms-clear {
display: none;
}

/* 禁用iPhone中Safari的字号自动调整 */
html { -webkit-text-size-adjust: none; }

-webkit-overflow-scrolling: touch;
苹果手机滑动卡顿解决方案

去除Chrome等浏览器文本框默认发光边框

input:focus, textarea:focus {
outline: none;
}

去掉高光样式：

input:focus{
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-user-modify:read-write-plaintext-only;
}

当然这样以来，当文本框载入焦点时，所有浏览器下的文本框的边框都不会有颜色上及样式上的变化了，但我们可以重新根据自己的需要设置一下，如：

input:focus,textarea:focus {
outline: none;
border: 1px solid #f60;
}
这样的话，当文本框载入焦点时，边框颜色就会变为橙色，给用户一个反馈。

只要在样式里面加一句css去掉iPhone、iPad的默认按钮样式就可以了！~

input[type="button"], input[type="submit"], input[type="reset"] {

-webkit-appearance: none;

}

/*响应式媒体查询，*/

/*
* -----------------------------------------
* 320 ~ 480
* -----------------------------------------
*/
@media only screen and (min-width: 320px) and (max-width: 480px) {
}

/*
* -----------------------------------------
* 321 ~ 宽大于321的设备
* -----------------------------------------
*/
@media only screen and (min-width: 321px) {
}

/*
* -----------------------------------------
* ~ 320 宽小于320的设备
* -----------------------------------------
*/
@media only screen and (max-width: 320px) {
}

/*
* -----------------------------------------
* ~ 480 宽小于480的设备
* -----------------------------------------
*/
@media only screen and (max-width: 480px) {
}

/* medium screens (excludes iPad & iPhone) */
/*
* -----------------------------------------
* 481 ~ 767 宽大于480且小于767的iPad和iPhone
* -----------------------------------------
*/
@media only screen and (min-width: 481px) and (max-width: 767px) {
}

/* ipads (portrait and landscape) */
/*
* -----------------------------------------
* 768 ~ 1024 宽大于480且小于1024的iPad和iPhone
* -----------------------------------------
*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
}

/* ipads (landscape) */
/*
* -----------------------------------------
* 768 ~ 1024 宽大于480且小于1024的iPad和iPhone
* -----------------------------------------
*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
}

/* ipads (portrait) */
/*
* -----------------------------------------
* 768 ~ 1024 宽大于480且小于1024的iPad和iPhone
* -----------------------------------------
*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
}

/*
* -----------------------------------------
* 1444 ~ 1824 宽大于1444且小于1824的设备
* -----------------------------------------
*/
@media only screen and (min-width: 1444px) and (max-width: 1824px) {
}

/*
* -----------------------------------------
* 1824 ~ 宽大于1824的设备
* -----------------------------------------
*/
@media only screen and (min-width: 1824px) {
}

/*
* -----------------------------------------
* 2224 ~ 宽大于2224的设备
* -----------------------------------------
*/
@media only screen and (min-width: 2224px) {
}

/* iphone 4 and high pixel ratio (1.5+) devices */
/*
* -----------------------------------------
* iphone4 ~
* -----------------------------------------
*/
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
}/* iphone 4 and higher pixel ratio (2+) devices (retina) */

Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。