//iphone的个人标签,//iphone的村办标签

 

H5页面窗口自动调整到装备宽度,并取缔用户缩放页面

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

(部分安卓手机的UC浏览器写完之后要么得以松开缩短)

 

疏忽将页面中的数字识别为电话号码

<meta name=”format-detection” content=”telephone=no” />(ios上会显然有时候会把数字当成电话号码)

 

忽略Android平马尔默对邮箱地址的识别

<meta name=”format-detection” content=”email=no” />

H5页面窗口自动调整到设备宽度,并取缔用户缩放页面

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

(部分安卓手机的UC浏览器写完之后恐怕可以拓宽裁减)

viewport模板

<meta charset=”utf-8″>

<meta content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no” name=”viewport”>//主要I是胁迫让文档的拉长率与设备宽度保持1:1,最大幅面1.0,禁止显示器缩放。

<meta content=”yes” name=”apple-mobile-web-app-capable”>//这一个也是iphone私有标签,允许全屏浏览。

<meta content=”black” name=”apple-mobile-web-app-status-bar-style”>//iphone的私家标签,iphone顶端状态条的体裁。

<meta content=”telephone=no” name=”format-detection”>//禁止数字自动识别为电话号码,这几个比较有用,因为一串数字在iphone上会显示成青色,样式加成其余颜色也是不奏效的。

<meta content=”email=no” name=”format-detection”>

 

忽略将页面中的数字识别为电话号码

<meta name=”format-detection” content=”telephone=no” />(ios上会鲜明有时候会把数字当成电话号码)

webkit表单成分的默许外观怎么重置

.css{-webkit-appearance:none;} (ios上的下拉框会有圆角,所以要写border-radius:0)

 

忽略Android平奥兰多对邮箱地址的鉴别

<meta name=”format-detection” content=”email=no” />

在input框得到大旨时文字被清空用value 在input框输入文字时被清空用placeholder

 

viewport模板

<meta charset=”utf-8″>

<meta content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no” name=”viewport”>//首要I是强制让文档的幅度与装备宽度保持1:1,最大幅面1.0,禁止显示屏缩放。

<meta content=”yes” name=”apple-mobile-web-app-capable”>//那些也是iphone私有标签,允许全屏浏览。

<meta content=”black” name=”apple-mobile-web-app-status-bar-style”>//iphone的个人标签,iphone顶端状态条的体制。

<meta content=”telephone=no” name=”format-detection”>//禁止数字自动识别为电话号码,那么些相比较有用,因为一串数字在iphone上会突显成黑色,样式加成其余颜色也是不见效的。

<meta content=”email=no” name=”format-detection”>

 

webkit表单输入框placeholder的文字能换行么?ios可以,android不行~,在textarea标签下都得以换行~

 

html,body{

overflow: hidden;/*手机上写overflow-x:hidden;会有包容性难点,即使子级假如是相对定位有活动到显示器外的话ios7系统会出现留白*/

-webkit-overflow-scrolling:touch;/*顺理成章滚动,ios7下会有滑一下落不动的景况,所以需要写上*/

position:realtive;/*直接子级假若是纯属定位有活动到屏幕外的话,会现出留白*/

 

}

 

手机上的flex布局时会有兼容性难点,只用新本子的会出现安卓手机不识其他现象

.box{

    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */

    display: -moz-box; /* 老版本语法: Firefox (buggy) */

    display: -ms-flexbox; /* 混合版本语法: IE 10 */

    display: -webkit-flex; /* 新本子语法: Chrome 21+ */

display: flex; /* 新本子语法: Opera 12.1, Firefox 22+ */

}

.box>li{

-webkit-box-flex: 1.0;

box-flex: 1.0;

-webkit-flex: 1.0;

flex: 1;

width: 0;/*杀鸡取卵包容性难题*/

}

 

 

 

输入框的包容性化解

input[type=”text”],

input[type=”date”],

input[type=”tel”],

input[type=”email”],

input[type=”password”]{

-webkit-appearance: none;

display: block;

width: 100%;

height: 0.8rem;

line-height:normal;/*手机上的line-height不大概写成和height的值一样,会见世重复输入光标靠上的场所*/

background: none;

font-size: 0.32rem;

padding-left: 0.28rem;

border-radius: 0;

-webkit-border-radius: 0;

border: 1px solid #d5d5d5;

-moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

outline: none;

-webkit-transform: translateZ(0);

    -moz-transform: translateZ(0);

    -ms-transform: translateZ(0);

    -o-transform: translateZ(0);

    transform: translateZ(0);/*缓解参预js后input框输入弹指间变白的情景*/

}

 

剥夺 radio 和 checkbox 默许样式

input[type=”radio”]::-ms-check,input[type=”checkbox”]::-ms-check{

display: none;/*这么就足以用class自定义样式*/

}

 

webkit表单输入框placeholder的颜色值

input::-webkit-input-placeholder{color:#999;}

input:focus::-webkit-input-placeholder{color:#999;}

 

手机上的多行省略

.overflow-hidden{

display: box !important;

display: -webkit-box !important;

overflow: hidden;

text-overflow: ellipsis;

-webkit-box-orient: vertical;

-webkit-line-clamp: 4;/*第几行出现省略号*/

/*text-align:justify;无法和溢出隐藏的代码一起写,会有bug*/

}

文件标签line-height:1恐怕是line-height等于height文字会被切掉

 

手机上变化成分能写宽尽量写宽不然很不难并发包容性难点,尽量不要写高,因为内容有点不稳定

 

给差别屏幕尺寸的手机安装尤其体制

 

@media only screen  and (min-device-width : 320px)  and (max-device-width : 375px){}

 

<button></button>成分一定要写上type属性不然会默认提交表单,出现意外的bug

 

一点安卓手机的自带浏览器不识别onkeydown onkeypress onkeyup事件,这几个事件会招致无法输入汉字

input框假使不想输入文字 只可以读不大概写可以加readonly属性

手机上用背景图写运动,若是急需背景图定位来贯彻活动功用可以用rem进行计算后增进basckground-size:图的个数*100% 0;

写背景图时最好增加top left 或然0 0 不然写运动成效时不难出现跳

 

弹层的关闭事件不难触发弹层关闭后下一层的事件所以要给弹层关闭事件加上event.preventDefault()

弹层弹出后不容许屏幕滚动给弹层加mousemove事件event.preventDefault()

面包屑导航假设依据bootstrap给li加:after伪成分的话在其余浏览器和在UC浏览器中显示的不等同,UC的的会比其他的浏览器宽,所占地点更加多

 

比方一个手机看看的和其他手机分歧 会比此外的无绳电话机大依旧小,查看她的浏览器字体设置是还是不是正规,应该是她把手机浏览的字号调小或许调大了(坑人的所谓的bug)

 

IOS手机中要是出现一个因素的层级特别高可仍旧被其他成分遮盖的,那么就将该因素与别的元素同级

 

三星手机一定定位有bug 检查html和body是否安装了overflow-x:hidden;

webkit表单成分的默认外观怎么重置

.css{-webkit-appearance:none;} (ios上的下拉框会有圆角,所以要写border-radius:0)

 

在input框得到核心时文字被清空用value 在input框输入文字时被清空用placeholder

 

webkit表单输入框placeholder的文字能换行么?ios能够,android不行~,在textarea标签下都可以换行~

 

html,body{

overflow: hidden;/*手机上写overflow-x:hidden;会有包容性难题,如果子级假若是相对定位有活动到屏幕外的话ios7种类会现出留白*/

-webkit-overflow-scrolling:touch;/*顺理成章滚动,ios7下会有滑一骤降不动的图景,所以须要写上*/

position:realtive;/*平昔子级借使是相对定位有移动到屏幕外的话,会油然则生留白*/

 

}

 

手机上的flex布局时会有包容性难点,只用新本子的会产出安卓手机不识其余情景

.box{

    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */

    display: -moz-box; /* 老版本语法: Firefox (buggy) */

    display: -ms-flexbox; /* 混合版本语法: IE 10 */

    display: -webkit-flex; /* 新本子语法: Chrome 21+ */

display: flex; /* 新本子语法: Opera 12.1, Firefox 22+ */

}

.box>li{

-webkit-box-flex: 1.0;

box-flex: 1.0;

-webkit-flex: 1.0;

flex: 1;

width: 0;/*不留余地包容性难点*/

}

 

 

 

输入框的包容性化解

input[type=”text”],

input[type=”date”],

input[type=”tel”],

input[type=”email”],

input[type=”password”]{

-webkit-appearance: none;

display: block;

width: 100%;

height: 0.8rem;

line-height:normal;/*手机上的line-height无法写成和height的值一样,会产出重复输入光标靠上的光景*/

background: none;

font-size: 0.32rem;

padding-left: 0.28rem;

border-radius: 0;

-webkit-border-radius: 0;

border: 1px solid #d5d5d5;

-moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

outline: none;

-webkit-transform: translateZ(0);

    -moz-transform: translateZ(0);

    -ms-transform: translateZ(0);

    -o-transform: translateZ(0);

    transform: translateZ(0);/*涸泽而渔插足js后input框输入弹指间变白的景色*/

}

 

剥夺 radio 和 checkbox 默认样式

input[type=”radio”]::-ms-check,input[type=”checkbox”]::-ms-check{

display: none;/*那般就可以用class自定义样式*/

}

 

webkit表单输入框placeholder的颜色值

input::-webkit-input-placeholder{color:#999;}

input:focus::-webkit-input-placeholder{color:#999;}

 

手机上的多行省略

.overflow-hidden{

display: box !important;

display: -webkit-box !important;

overflow: hidden;

text-overflow: ellipsis;

-webkit-box-orient: vertical;

-webkit-line-clamp: 4;/*第几行出现省略号*/

/*text-align:justify;不可以和溢出隐藏的代码一起写,会有bug*/

}

文本标签line-height:1或许是line-height等于height文字会被切掉

 

手机上变化成分能写宽尽量写宽不然很不难出现包容性难题,尽量不要写高,因为内容有点不固定

 

给不一致显示器尺寸的手机安装越发体制

 

@media only screen  and (min-device-width : 320px)  and (max-device-width : 375px){}

 

<button></button>元素一定要写上type属性不然会默许提交表单,出现意料之外的bug

 

好几安卓手机的自带浏览器不识别onkeydown onkeypress onkeyup事件,这几个事件会招致无法输入汉字

input框假设不想输入文字 只可以读不可能写可以加readonly属性

手机上用背景图写运动,倘诺要求背景图定位来贯彻移动功成效够用rem举办测算后增进basckground-size:图的个数*100% 0;

写背景图时最好增加top left 只怕0 0 不然写运动功能时便于并发跳

 

弹层的关闭事件简单触发弹层关闭后下一层的风云所以要给弹层关闭事件加上event.preventDefault()

弹层弹出后不允许屏幕滚动给弹层加mousemove事件event.preventDefault()

面包屑导航如果根据bootstrap给li加:after伪元素的话在其余浏览器和在UC浏览器中显现的不雷同,UC的的会比其余的浏览器宽,所占地点更加多

 

倘使一个无线电话看看的和其他手机不同 会比其余的无绳电话机大依然小,查看她的浏览器字体设置是不是正常,应该是她把手机浏览的字号调小只怕调大了(坑人的所谓的bug)

 

IOS手机中一旦现身一个因素的层级尤其高可仍然被其余成分遮盖的,那么就将该因素与其他成分同级

 

三星手机定位定位有bug 检查html和body是或不是安装了overflow-x:hidden;

转载至:http://www.cnblogs.com/binmengxue/p/5788620.html

 

相关文章