【转】web移动端一些常用知识

1.去掉 a，input 在移动端浏览器中的默认样式(半透明灰色遮罩阴影)

a,button,input,optgroup,select,textarea {
    -webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/
}

2.禁止长按 a，img 标签长按出现菜单栏

a, img {
    -webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/
}

3.省略号

//css单行
.test{
    width:300px;
    overflow: hidden;
    text-overflow:ellipsis;  /* 当字符串超过规定长度，显示省略符*/
    white-space: nowrap;
}


//多行,不用上js,使用-webkit的私有属性,-webkit-line-clamp:值number,为有几行
.test{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

4.swiper插件(当屏幕旋转或变化时,重新计算位移)

observer:true,
observeParents:true,  将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新。
swiper.update(true);        //重新计算Wrapper的位移

5.移动端字体

ios 系统
默认中文字体是Heiti SC
默认英文字体是Helvetica
默认数字字体是HelveticaNeue
无微软雅黑字体

android 系统
默认中文字体是Droidsansfallback
默认英文和数字字体是Droid Sans
无微软雅黑字体

winphone 系统
默认中文字体是Dengxian(方正等线体)
默认英文和数字字体是Segoe
无微软雅黑字体

//使用系统默认的字体所达到的视觉效果跟使用微软雅黑字体没有明显的差别
各个手机系统有自己的默认字体，且都不支持微软雅黑
如无特殊需求，手机端无需定义中文字体，使用系统默认
英文字体和数字字体可使用 Helvetica ，三种系统都支持
body{font-family:Helvetica;}

6.CSS3 @font-face  自己定义的Web字体嵌入到你的网页中

在线转化字体: //https://www.fontsquirrel.com/tools/webfont-generator

@font-face {
    font-family: 'SingleMaltaRegular';              /* name */
    src: url('../fonts/singlemalta-webfont.eot');       /* IE9 Compat Modes */
    src: url('../fonts/singlemalta-webfont.eot?#iefix') format('embedded-opentype'),    /* IE6-IE8 */
       url('../fonts/singlemalta-webfont.woff') format('woff'),     /* Modern Browsers */
    url('../fonts/singlemalta-webfont.ttf') format('truetype'),     /* Safari, Android, iOS */
    url('../fonts/singlemalta-webfont.svg#SingleMaltaRegular') format('svg');   /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}
//调用
body{font-family: 'SingleMaltaRegular';}

7.移动端click屏幕产生200-300 ms的延迟响应(可使用touch事件)

原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接<a href="#"></a>，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作.
所以，捕获第一次单击后，浏览器会先Hold一段时间t，如果在t时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操作。
那么这个时间区间t有多少呢？在IOS safari下，大概为300毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面，页面需要过一段时间才响应，给用户慢体验感觉，对于web开发者来说是，页面js捕获click事件的回调函数处理，需要300ms后才生效，也就间接导致影响其他业务逻辑的处理。

8.伪元素改变number类型input框的默认样式

input[type=number]::-webkit-textfield-decoration-container {
    background-color: transparent;    
}
input[type=number]::-webkit-inner-spin-button {
     -webkit-appearance: none;
}
input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
}

//webkit表单输入框placeholder的颜色值
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}

9.禁止ios和android用户选中文字

.css{-webkit-user-select:none}

10.模拟按钮hover效果,激活移动端css的active效果

.btn-blue:active{background-color: #357AE8;}

兼容性ios5+、部分android 4+、winphone 8
要做到全兼容的办法，可通过绑定ontouchstart和ontouchend来控制按钮的类名

11.屏幕旋转的事件和样式

//判断手机横竖屏状态：
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
    if (window.orientation === 180 || window.orientation === 0) {
        alert('竖屏状态！');
    }
    if (window.orientation === 90 || window.orientation === -90 ){
        alert('横屏状态！');
    }
}, false);

/移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。

/*css横屏提醒*/
#transverse {position:fixed;z-index:9999;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8) url(/images/transvers.png) no-repeat center center;background-size:50% auto;}
@media all and (orientation : landscape) {
    #transverse { display:block; }
}
@media all and (orientation : portrait){
    #transverse { display:none; }
}

 

12.audio元素和video元素在ios和andriod中无法自动播放

$('html').one('touchstart',function(){
    audio.play()
})

<!--
1.目前只有ios7+、winphone8+支持自动播放
2.支持Airplay的设备（如：音箱、Apple TV)播放
x-webkit-airplay="true"
3.播放视频不全屏，ios7+、winphone8+支持，部分android4+支持（含华为、小米、魅族）
webkit-playsinline="true"
-->
<video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video>

13.消除transition闪屏

.css{
/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
-webkit-transform-style: preserve-3d;
/*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/
-webkit-backface-visibility: hidden;
}

14.取消input在ios下，输入的时候英文首字母的默认大写

<input autocapitalize="off" autocorrect="off" />

15.android 2.3 bug

@-webkit-keyframes 需要以0%开始100%结束，0%的百分号不能去掉
after和before伪类无法使用动画animation
border-radius不支持%单位
translate百分比的写法和scale在一起会导致失效，例如-webkit-transform: translate(-50%,-50%) scale(-0.5, 1)

16.android 4.x bug

三星 Galaxy S4中自带浏览器不支持border-radius缩写
同时设置border-radius和背景色的时候，背景色会溢出到圆角以外部分
部分手机(如三星)，a链接支持鼠标:visited事件，也就是说链接访问后文字变为紫色
android无法同时播放多音频audio

17.Android 4.2.x 背景色溢出

//需要是使用background-clip: padding-box;来修复
.test{
    background-clip: padding-box;
}

18.border-radius兼容写法

.foo {
    width: 100px;
    height: 100px;
    border: 5px solid blue;
    border-top-left-radius: 999px; /* 左上角 */
    border-top-right-radius: 999px; /* 右上角 */
    border-bottom-right-radius: 999px; /* 右下角 */
    border-bottom-left-radius: 999px; /* 左下角 */
    border-radius: 999px;
    background-color: #ccc;
    background-clip: padding-box;
}

19.如何阻止windows Phone的默认触摸事件

winphone下默认触摸事件事件使用e.preventDefault是无效的
目前解决方法是使用样式来禁用
html{-ms-touch-action: none;}/* 禁止winphone默认触摸事件 */

20.滑屏框架(适合上下滑屏、左右滑屏等滑屏切换页面的效果)

slip.js    https://github.com/peunzhang/slip.js
iSlider.js  https://github.com/peunzhang/iSlider
fullpage.js  https://github.com/peunzhang/fullpage
swiper.js  http://www.swiper.com.cn/

21.iscroll.js

解决页面不支持弹性滚动，不支持fixed引起的问题~
实现下拉刷新，滑屏，缩放等功能~
最新版本已经更新到5.0
官网：http://cubiq.org/iscroll-5

22.解决IOS fixed定位问题(有小瑕疵是会滚动到底部),中间是absolute布局

function onTouchMove(e) {
    e.preventDefault();
    e.stopPropagation();
};
function onFocus(e) {
    this.main.style.position = 'absolute';
    if (/iphone|ipad|ipod/i.test(navigator.userAgent)) {
        inputMessageBox.style.position = "absolute";
        $HTML.animate({scrollTop:viewHeight});　　　　//中间内容的高度
    };
    document.body.addEventListener('touchmove', onTouchMove, false);
}
function onBlur(e) {
    this.main.style.position = 'fixed';
    document.body.removeEventListener('touchmove', onTouchMove);
}

23.禁止复制、选中文本

Element { 
-webkit-user-select: none; 
-moz-user-select: none; 
-khtml-user-select: none; 
user-select: none; 
}

24.使用遮罩层在一些浏览器顶部自带搜索框时,向下滑动会快速出现一片空白

.mask{
    position:fixed;
    width:100%;
    height:200%;        //高度给高点
    left:0;
    right:0;
    top:0;
    bottom;
    opacity:1
    background-color:#111;
}
这样在一些浏览器顶部自带搜索框时,向下滑动会快速出现一片空白(浏览器顶部自带搜索框的高度)
所有宽高给高点可以解决这些bug

25.meta标签

1.<meta name="apple-mobile-web-app-capable" content="yes">
如果content设置为yes，Web应用会以全屏模式运行，反之，则不会。content的默认值是no，表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。
兼容性：
iOS 2.1 +

2.<meta name="apple-mobile-web-app-status-bar-style" content="blank">
除非你先使用apple-mobile-web-app-capable指定全屏模式，否则这个meta标签不会起任何作用。
设置Web App的状态栏（屏幕顶部栏）的样式
如果content设置为default，则状态栏正常显示。如果设置为blank，则状态栏会有一个黑色的背景。如果设置为blank-translucent，则状态栏显示为黑色半透明。如果设置为default或blank，则页面显示在状态栏的下方，即状态栏占据上方部分，页面占据下方部分，二者没有遮挡对方或被遮挡。如果设置为blank-translucent，则页面会充满屏幕，其中页面顶部会被状态栏遮盖住（会覆盖页面20px高度，而iphone4和itouch4的Retina屏幕为40px）。默认值是default。

启动或禁用自动识别页面中的电话号码。
3.<meta name="format-detection" content="telephone=no">
4.<meta name="format-detection" content="email=no">

禁止浏览器放大字体
15.<meta name="wap-font-scale" content="no">

UC浏览器私有属性
//设置屏幕方向为横屏还是竖屏
<meta name="screen-orientation" content="portrait|landscape">
//设置是否全屏，yes表示强制浏览器全屏
<meta name="full-screen" content="yes">
//缩放不出滚动条，设置为yes后不出现横向滚动条。
<meta name="viewport" content="uc-fitscreen=no|yes"/>
//夜间模式disable为禁用夜间模式
<meta name="nightmode" content="enable|disable"/>
//禁用UC浏览器的无图模式
<meta name="imagemode" content="force"/>
//app模式，使用了application这种应用模式后，页面讲默认全屏，禁止长按菜单，禁止收拾，标准排版，以及强制图片显示。
<meta name="browsermode" content="application"/>

QQ浏览器私有属性
//设置屏幕方向为横屏还是竖屏
<meta name="x5-orientation" content="portrait|landscape" />
//设置是否全屏，yes表示强制浏览器全屏
<meta name="x5-fullscreen" content="true" />
//app模式
<meta name="x5-page-mode" content="app" />

<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">


添加到主屏（苹果 IOS Safari）
<!-- 启用 WebApp 应用全屏模式，这个只会在你保存为桌面应用后从中打开才会全屏，在浏览器中不会全屏 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--保存某个页面到桌面的时候的应用标题-->
<meta name="apple-mobile-web-app-title" content="标题">
<!--保存某个页面到桌面的时候使用这张图作为桌面图标，尺寸和iphone上的一致，是57*57px-->
<link rel="apple-touch-icon" href="custom_icon.png">
<!--启动图，只使用一张114*114的图片即可-->
<link rel="apple-touch-icon-precomposed" href="startup/apple-touch-icon-114x114-precomposed.png" />

避免百度转码
<meta http-equiv="Cache-Control" content="no-siteapp" />

13.data URI scheme是在RFC2397中定义的

data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。
目前，Data URI scheme支持的类型有：
data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

把图像文件的内容直接写在了HTML 文件中，这样做的好处是，节省了一个HTTP 请求。坏处是浏览器不会缓存这种图像。如
background:#f0f5f9 url(data:image/png;base64,iVBORw0KGgoAAAANS...SuQmCC) no-repeat 50% 50%