H伍项目广泛难题及注意事项,h伍项目普及难题

Meta基础知识:

  • H伍页面窗口自动调控到设备宽度,并取缔用户缩放页面

//一、HTML页面结构

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

// width    设置viewport宽度,为二个正整数,或字符串‘device-width’

// height
  设置viewport高度,一般设置了上升的幅度,会自行分析出冲天,能够毫不安装

// initial-scale    暗许缩放比例,为3个数字,能够带小数

// minimum-scale    允许用户最小缩放比例,为七个数字,可以带小数

// maximum-scale    允许用户最大缩放比例,为四个数字,能够带小数

// user-scalable    是还是不是允许手动缩放

 

//2、JS动态判别

var phoneWidth =  parseInt(window.screen.width);

var phoneScale = phoneWidth/640;

var ua = navigator.userAgent;

if (/Android (\d+\.\d+)/.test(ua)){

    var version = parseFloat(RegExp.$1);

    if(version>2.3){

        document.write(‘<meta name=”viewport” content=”width=640,
minimum-scale = ‘+phoneScale+’, maximum-scale = ‘+phoneScale+’,
target-densitydpi=device-dpi”>’);

    }else{

        document.write(‘<meta name=”viewport” content=”width=640,
target-densitydpi=device-dpi”>’);

    }

} else {

    document.write(‘<meta name=”viewport” content=”width=640,
user-scalable=no, target-densitydpi=device-dpi”>’);

}

空白页基本meta标签

<!– 设置缩放 –>

<meta name=”viewport” content=”width=device-width, initial-scale=1,
user-scalable=no, minimal-ui” />

<!–
可隐藏地址栏,仅针对IOS的Safari(注:IOS7.0版本之后,safari三春看不到效果)
–>

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

<!–
仅针对IOS的Safari顶端状态条的样式(可选default/black/black-translucent
) –>

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

<!– IOS中禁止使用将数字识别为电话号码/忽略Android平德雷斯顿对邮箱地址的分辨
–>

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

其他meta标签

<!– 启用360浏览器的极速形式(webkit) –>

<meta name=”renderer” content=”webkit”>

<!– 幸免IE使用卓殊格局 –>

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

<!–
针对手持设备优化,首即使针对性有些老的不识别viewport的浏览器,比如Moto小田切让–>

H伍项目广泛难题及注意事项,h伍项目普及难题。<meta name=”HandheldFriendly” content=”true”>

<!– 微软的老式浏览器 –>

<meta name=”MobileOptimized” content=”320″>

<!– uc强制竖屏 –>

<meta name=”screen-orientation” content=”portrait”>

<!– QQ强制竖屏 –>

<meta name=”x5-orientation” content=”portrait”>

<!– UC强制全屏 –>

<meta name=”full-screen” content=”yes”>

<!– QQ强制全屏 –>

<meta name=”x5-fullscreen” content=”true”>

<!– UC应用方式 –>

<meta name=”browsermode” content=”application”>

<!– QQ应用方式 –>

<meta name=”x5-page-mode” content=”app”>

<!– windows phone 点击无高光 –>

<meta name=”msapplication-tap-highlight” content=”no”>

 

Meta基础知识:

  • H五页面窗口自动调整到设备宽度,并严令禁止用户缩放页面

//1、HTML页面结构

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

// width    设置viewport宽度,为五个正整数,或字符串‘device-width’

// height
  设置viewport中度,一般设置了上涨的幅度,会自动分析出高度,能够毫不安装

// initial-scale    暗中同意缩放比例,为贰个数字,能够带小数

// minimum-scale    允许用户最小缩放比例,为二个数字,能够带小数

// maximum-scale    允许用户最大缩放比例,为3个数字,能够带小数

// user-scalable    是还是不是允许手动缩放

 

//贰、JS动态判定

var phoneWidth =  parseInt(window.screen.width);

var phoneScale = phoneWidth/640;

var ua = navigator.userAgent;

if (/Android (\d+\.\d+)/.test(ua)){

    var version = parseFloat(RegExp.$1);

    if(version>2.3){

        document.write(‘<meta name=”viewport” content=”width=640,
minimum-scale = ‘+phoneScale+’, maximum-scale = ‘+phoneScale+’,
target-densitydpi=device-dpi”>’);

    }else{

        document.write(‘<meta name=”viewport” content=”width=640,
target-densitydpi=device-dpi”>’);

    }

} else {

    document.write(‘<meta name=”viewport” content=”width=640,
user-scalable=no, target-densitydpi=device-dpi”>’);

}

空白页基本meta标签

<!– 设置缩放 –>

<meta name=”viewport” content=”width=device-width, initial-scale=1,
user-scalable=no, minimal-ui” />

<!–
可隐藏地址栏,仅针对IOS的Safari(注:IOS7.0本子之后,safari末春看不到效果)
–>

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

<!–
仅针对IOS的Safari顶端状态条的体制(可选default/black/black-translucent
) –>

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

<!– IOS中禁止使用将数字识别为电话号码/忽略Android平弗罗茨瓦夫对邮箱地址的辨别
–>

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

其他meta标签

<!– 启用360浏览器的极速情势(webkit) –>

<meta name=”renderer” content=”webkit”>

<!– 防止IE使用卓殊方式 –>

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

<!–
针对手持设备优化,首借使指向某个老的不识别viewport的浏览器,比如One plus–>

<meta name=”HandheldFriendly” content=”true”>

<!– 微软的过时浏览器 –>

<meta name=”MobileOptimized” content=”320″>

<!– uc强制竖屏 –>

<meta name=”screen-orientation” content=”portrait”>

<!– QQ强制竖屏 –>

<meta name=”x5-orientation” content=”portrait”>

<!– UC强制全屏 –>

<meta name=”full-screen” content=”yes”>

<!– QQ强制全屏 –>

<meta name=”x5-fullscreen” content=”true”>

<!– UC应用情势 –>

<meta name=”browsermode” content=”application”>

<!– QQ应用方式 –>

<meta name=”x5-page-mode” content=”app”>

<!– windows phone 点击无高光 –>

<meta name=”msapplication-tap-highlight” content=”no”>

 

H五项目周边难点及注意事项,h伍项目广泛难点

移动Web开发,web开发

meta基础知识

H伍页面窗口自动调控到装备宽度,并禁止用户缩放页面

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

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

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

忽略Android平苏州对邮箱地址的辨识

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

当网址增加到主显示屏急迅运维情势,可隐藏地址栏,仅针对ios的safari

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

<!– ios7.0本子之后,safari央月看不到效果 –>

将网址增加到主显示屏快快捷运输行格局,仅针对ios的safari顶端状态条的体制

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

<!– 可选default、black、black-translucent –>

viewport模板
viewport模板——通用

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″>

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

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

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

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

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

<title>标题</title>

<link rel=”stylesheet” href=”index.css”>

</head>

 

<body>

此处开头内容

</body>

 

</html>

viewport模板 – target-densitydpi=device-dpi,android 2.三.5之下版本不帮助

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″>

<meta name=”viewport” content=”width=750, user-scalable=no,
target-densitydpi=device-dpi”><!– width取值与页面定义的宽度1致
–>

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

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

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

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

<title>标题</title>

<link rel=”stylesheet” href=”index.css”>

</head>

 

<body>

此地开首内容

</body>

 

</html>

参照案例:

科学普及难题

移步端怎么着定义字体font-family
普通话字体使用系统暗中认可就可以,英文用Helvetica

/* 移动端定义字体的代码 */

body{font-family:Helvetica;}

参照《移动端接纳字体的挂念》

挪动端字体单位font-size选拔px依旧rem
对于只须要适配少壹些手提式有线电话机配备,且分辨率对页面影响十分的小的,使用px就能够

对此需要适配各类运动设备,使用rem,例如只要求适配红米和GALAXY Tab等分辨率差距相比较挺大的装备

rem配置参考:

html{font-size:10px}

@media screen and (min-width:321px) and
(max-width:375px){html{font-size:11px}}

@media screen and (min-width:376px) and
(max-width:414px){html{font-size:12px}}

@media screen and (min-width:415px) and
(max-width:639px){html{font-size:15px}}

@media screen and (min-width:640px) and
(max-width:719px){html{font-size:20px}}

@media screen and (min-width:720px) and
(max-width:749px){html{font-size:22.5px}}

@media screen and (min-width:750px) and
(max-width:799px){html{font-size:23.5px}}

@media screen and (min-width:800px){html{font-size:25px}}

移动端touch事件(区分webkit winphone)
当用户手指放在移动装备在荧屏上海搞笑剧团动会触发的touch事件

以下补助webkit

  • touchstart——当手指触碰显示器时候产生。不管当前有些许只手指
  • touchmove——当手指在显示器上海滑稽剧团动时老是触发。经常我们再滑屏页面,会调用event的preventDefault()能够阻挡私下认可情形的发生:阻止页面滚动
  • touchend——当手指离开显示器时接触
  • touchcancel——系统甘休追踪触摸时候会触发。例如在触摸进程中赫然页面alert()三个提示框,此时会触发该事件,那么些事件相比较少用

TouchEvent

  • touches:显示屏上有所手指的新闻
  • targetTouches:手指在目的区域的指尖音信
  • changedTouches:近年来一回触发该事件的指头音讯
  • touchend时,touches与targetTouches消息会被剔除,changedTouches保存的终极一次的音信,最佳用于计算手指音信

参数消息(changedTouches[0])

  • clientX、clientY在突显区的坐标
  • target:当前成分

参考:

以下援救winphone 捌

  • MSPointerDown——当手指触碰显示屏时候发出。不管当前某些许只手指
  • MSPointerMove——当手指在显示器上海好笑剧团动时总是触发。平日大家再滑屏页面,会调用css的html{-ms-touch-action:
    none;}能够阻碍默许情形的产生:阻止页面滚动
  • MSPointerUp——当手指离开显示屏时接触

移步端click荧屏发生200-300 ms的延期响应

活动装备上的web网页是有300ms延迟的,玩玩会促成开关点击延迟甚至是点击失效。

以下是野史由来,来源1个店肆内三个同事的分享:

二零零七年苹果发表第3个款式iphone上IOS系统搭载的safari为了将适用于PC端上海南大学学荧屏的网页能相比较好的来得在手提式有线电话机端上,使用了双击缩放(double
tap to
zoom)的方案,比如你在手提式有线电话机上用浏览器打开2个PC上的网页,你或然在察看页面内容即便能够撑满整个显示屏,可是字体、图片都一点都不大看不清,此时得以赶快双击荧屏上的某壹局地,你就能看清该有的放大后的始末,再度双击后能回来原有状态。

双击缩放是指用手指在显示器上高速点击五回,iOS 自带的 Safari
浏览器会将网页缩放至原始比例。

原因就出在浏览器须求什么决断快捷点击上,当用户在荧屏上单击某三个因素时候,例如跳转链接<a
href=”#”></a>,此处浏览器会先捕获该次单击,但浏览器不可能调节用户是单纯要点击链接也许要双击该有的区域拓展缩放操作,所以,捕获第叁遍单击后,浏览器会先Hold一段时间t,假若在t时间区间里用户未开始展览下二次点击,则浏览器会做单击跳转链接的拍卖,假设t时间里用户实行了第3回单击操作,则浏览器会禁止跳转,转而进行对该部分区域页面包车型地铁缩放操作。那么那一个时刻区间t有微微呢?在IOS
safari下,大致为300飞秒。那正是延迟的由来。产生的结果用户纯粹单击页面,页面供给过1段时间才响应,给用户慢体验感到,对于web开荒者来讲是,页面js捕获click事件的回调函数处理,供给300ms后才生效,也就直接导致影响别的事情逻辑的拍卖。

斩草除根方案:

  • fastclick能够化解在大哥伦比亚大学上点击事件的300ms延迟
  • zepto的touch模块,tap事件也是为着解决在click的推移难点

触摸事件的响应顺序

缓解300ms延迟的难点,也足以通过绑定ontouchstart事件,加速对事件的响应

什么是Retina 显示屏,带来了什么难点
retina:1种具备超高像素密度的液晶屏,同样大小的显示器上彰显的像素点由三个产生四个,如在同等风疹的显示屏上,苹果设备的retina荧屏中,像素点3个变为伍个

在高清荧屏中的位图被放大,图片会变得模糊,由此活动端的视觉稿常常会规划为守旧PC的二倍

那就是说,前端的答复方案是:

统一筹划稿切出来的图纸长度宽度有限支撑为偶数,并选择backgroud-size把图纸裁减为本来的二分一

//例如图片宽高为:200px*200px,那么写法如下

.css{width:100px;height:100px;background-size:100px 100px;}

别的成分的取值为原本的3/6,例如视觉稿40px的书体,使用样式的写法为20px

.css{font-size:20px}

参照《高清显示屏原理及设计方案》

ios系统瓜月素被触摸时发生的半透明水泥灰遮罩怎么去掉

ios用户点击1个链接,会出现二个半透明玫瑰紫遮罩,
即使想要禁用,可设置-webkit-tap-highlight-color的阿尔法值为0,也便是属性值的末尾1个人设置为0就足以去除半晶莹剔透玫瑰紫遮罩

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

部分android系统3月素被点击时爆发的边框怎么去掉

android用户点击3个链接,会师世二个边框或许半晶莹剔透中黄遮罩,
不相同生产商定义出来额效果不等同,可安装-webkit-tap-highlight-color的阿尔法值为0去除一些机器自带的意义

a,button,input,textarea{

-webkit-tap-highlight-color: rgba(0,0,0,0;)

-webkit-user-modify:read-write-plaintext-only;

}

-webkit-user-modify有个副效能,正是输入法不再能够输入多个字符

其它,有个别机型去除不了,如HTC2

对于按键类还有个措施,不使用a或许input标签,直接用div标签

参考《怎么样去除android上a标签发生的边框》

winphone系统a、input标签被点击时发生的半透明棕黑背景怎么去掉

<meta name=”msapplication-tap-highlight” content=”no”>

webkit表单成分的暗中认可外观怎么复位

.css{-webkit-appearance:none;}

webkit表单输入框placeholder的颜色值能改换么

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

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

webkit表单输入框placeholder的文字能换行么
ios可以,android不行~

在textarea标签下都得以换行~

IE10(winphone8)表单成分默许外观怎么重新设置
剥夺 select 暗许下拉箭头

::-ms-expand 适用于表单选取控件下拉箭头的修改,有多少个属性值,设置它隐藏
(display:none) 并选取背景图片来修饰可获得大家想要的作用。

select::-ms-expand {

display: none;

}

剥夺 radio 和 checkbox 默许样式

::-ms-check
适用于表单复选框或单选按键暗中同意Logo的改动,同样有多少个属性值,设置它隐藏
(display:none) 并使用背景图片来修饰可收获大家想要的效果。

input[type=radio]::-ms-check,

input[type=checkbox]::-ms-check

{

display: none;

}

剥夺PC端表单输入框暗许清除开关

当表单文本输入框输入内容后会彰显文本清除开关,::-ms-clear
适用于该排除按键的改造,同样设置使它隐藏 (display:none)
并利用背景图片来修饰可收获大家想要的成效。

input[type=text]::-ms-clear,

input[type=tel]::-ms-clear,

input[type=number]::-ms-clear

{

display: none;

}

不准ios 长按期不触发系统的菜单,禁止ios&android长按期下载图片

.css{-webkit-touch-callout: none}

取缔ios和android用户选粤语字

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

参考《怎么着改动表单成分的外观(for Webkit and IE拾)》

打电话发短信写邮件怎么落到实处
打电话

<a href=”tel:075伍-十086″>打电话给:075伍-拾086</a>

发短信,winphone系统无效

<a href=”sms:拾08六”>发短信给: 拾08陆</a>

写邮件,可参考《移动web页面给用户发送邮件的不二诀要》

<a
href=”mailto:[email protected]”>[email protected]</a>

依傍按键hover效果
活动端触摸按键的效果,可明示用户有个别工作恰好产生,是2个相比好经验,可是运动装备中并从未鼠标指针,使用css的hover并不可能满足大家的需要,辛亏国外有个激活css的active效果,代码如下,

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″>

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

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

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

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

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

<style type=”text/css”>

a{-webkit-tap-highlight-color: rgba(0,0,0,0);}

.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color:
#4185F3;}

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

</style>

</head>

<body>

 

<div class=”btn-blue”>按钮</div>

 

<script type=”text/javascript”>

document.addEventListener(“touchstart”, function(){}, true)

</script>

</body>

</html>

兼容性ios5+、部分android 4+、winphone 8

要完成全包容的秘技,可由此绑定ontouchstart和ontouchend来决定按键的类名

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″>

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

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

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

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

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

<style type=”text/css”>

a{-webkit-tap-highlight-color: rgba(0,0,0,0);}

.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color:
#4185F3;}

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

</style>

</head>

<body>

 

<div class=”btn-blue”>按钮</div>

 

<script type=”text/javascript”>

var btnBlue = document.querySelector(“.btn-blue”);

btnBlue.ontouchstart = function(){

this.className = “btn-blue btn-blue-on”

}

btnBlue.ontouchend = function(){

this.className = “btn-blue”

}

</script>

</body>

</html>

显示器旋转的风浪和样式
事件
window.orientation,取值:正负90意味着横屏格局、0和180表现为竖屏形式;

window.onorientationchange = function(){

switch(window.orientation){

case -90:

case 90:

alert(“横屏:” + window.orientation);

case 0:

case 180:

alert(“竖屏:” + window.orientation);

break;

}

}

样式

//竖屏时选拔的样式

@media all and (orientation:portrait) {

.css{}

}

 

//横屏时选拔的体裁

@media all and (orientation:landscape) {

.css{}

}

audio成分和video成分在ios和andriod中不能够自动播放
应对方案:触屏即播

$(‘html’).one(‘touchstart’,function(){

audio.play()

})

可参看《不大概自动播放的audio元素》

摇一摇效果
HTML五deviceMotion:封装了活动传感器数据的事件,能够获得手提式有线话机移动状态下的位移加快度等数据。

手提式有线电话机拍录和上传图片
<input type=”file”>的accept 属性

<!– 选拔照片 –>

<input type=file accept=”image/*”>

<!– 选取录像 –>

<input type=file accept=”video/*”>

采取总括:

ios 有拍照、摄像、采用本地图片功用
有个别android只有接纳本地图片功效
winphone不支持
input控件暗许外观丑陋
微信浏览器用户调节字体大小后页面矬了,怎么阻止用户调节
原因

android侧是复写了layoutinflater 对textview做了统1处理
ios侧是修改了body.style.webkitTextSizeAdjust值
化解方案:

android使用以下代码,该接口只在微信浏览器下有效(多谢jationhuang同学提供)

/**

* 页面出席那段代码可使Android机器页面不再遇到用户字体缩放强制改换大小

* 可是会有一个1秒左右的推移,时期可以思念通过loading体现

* 仅供参考

*/

(function(){

if (typeof(WeixinJSBridge) == “undefined”) {

document.addEventListener(“WeixinJSBridgeReady”, function (e) {

setTimeout(function(){

WeixinJSBridge.invoke(‘setFontSizeCallback’,{“fontSize”:0},
function(res) {

alert(JSON.stringify(res));

});

},0);

});

} else {

setTimeout(function(){

WeixinJSBridge.invoke(‘setFontSizeCallback’,{“fontSize”:0},
function(res) {

alert(JSON.stringify(res));

});

},0);

}

})();

ios使用-webkit-text-size-adjust禁止调节字体大小

body{-webkit-text-size-adjust: 100%!important;}

最棒的消除方案:

整整页面用rem大概百分比布局
消除transition闪屏
网络都以如此写的,但本人并未测试出来

.css{

/*设置内嵌的因素在 3D 空间怎么样表现:保留 3D*/

-webkit-transform-style: preserve-3d;

/*(设置举办改造的要素的北部在直面用户时是还是不是可知:隐藏)*/

-webkit-backface-visibility: hidden;

}

开启硬件加速
涸泽而渔页面闪白
确定保障动画流畅

.css {

-webkit-transform: translate3d(0, 0, 0);

-moz-transform: translate3d(0, 0, 0);

-ms-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

参考《用CSS开启硬件加快来巩固网址品质》

收回input在ios下,输入的时候英文首字母的暗中认可大写

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

android 上去掉语音输入开关

input::-webkit-input-speech-button {display: none}

android 2.3 bug

  • @-webkit-keyframes 要求以0%伊始百分之百收场,0%的百分号无法去掉
  • after和before伪类不可能使用动画animation
  • border-radius不支持%单位
  • translate百分比的写法和scale在联合具名会产生失效,例如-webkit-transform:
    translate(-5/拾,-百分之五10) scale(-0.5, 1)

android 4.x bug

  • 三星(Samsung) Galaxy S四中自带浏览器不援助border-radius缩写
  • 再者安装border-radius和背景观的时候,背景象会溢出到圆角以外部分
  • 壹部总部手提式无线电话机(如Samsung),a链接协理鼠标:visited事件,也便是说链接待上访问后文字变为青绿
  • android不能够同时播放多音频audio

参照《border-radius 移动之伤》

统一筹划高品质CSS三卡通的多少个要素

  • 尽可能地动用合成属性transform和opacity来设计CSS三动画,不采用position的left和top来恒定
  • 利用translate3D开启GPU加速

参考《High Performance Animations》

fixed bug

  • ios下fixed成分轻巧定位出错,软键盘弹出时,影响fixed成分定位
  • android下fixed表现要比iOS越来越好,软键盘弹出时,不会潜移默化fixed成分定位
  • ios四下不扶助position:fixed

缓解方案

  • 可用isroll.js,暂无完美方案

参考

《移动端web页面使用position:fixed难题计算》

《使用iScroll.js化解ios肆下不帮助position:fixed的主题素材》

怎样堵住windows Phone的私下认可触摸事件
winphone下暗中认可触摸事件事件选拔e.preventDefault是无用的

当下化解措施是选用样式来剥夺

html{-ms-touch-action: none;}/* 禁止winphone暗许触摸事件 */

参考

《Windows phone 8 touch support》

广播录像不全屏

<!–

一.ios七+援救自动播放

2.支持Airplay的设备(如:音箱、Apple TV)播放

x-webkit-airplay=”true”

三.播放录制不全屏

webkit-playsinline=”true”

–>

<video x-webkit-airplay=”true” webkit-playsinline=”true”
preload=”auto” autoplay src=”;

常用的移位端框架

zepto.js

语法与jquery差不离千篇1律,会jquery基本会zepto~

新型版本现已更新到壹.1六

官网:

中文(非官网):

常使用的恢弘模块:

浏览器检查测试:

tap事件:

iscroll.js

不留余地页面不协理弹性滚动,不援助fixed引起的标题~

贯彻下拉刷新,滑屏,缩放等效能~

新式版本现已更新到五.0

官网:

underscore.js

作者没用过,可是据悉好用,推荐给我们~

该库提供了一整套函数式编制程序的实用效用,不过尚未扩张任何JavaScript内置对象。

摩登版本现已更新到一.捌.2

官网:

滑屏框架

符合上下滑屏、左右滑屏等滑屏切换页面包车型地铁作用

slip.js

iSlider.js

fullpage.js

flex布局
flex布局最近可接纳在移动中,并非全部的语法都全包容,但以下写法小编试行过,效果甚佳~

/* ============================================================

flex:定义布局为盒模型

flex-v:盒模型垂直布局

flex-壹:子成分占有剩余的空间

flex-align-center:子成分垂直居中

flex-pack-center:子成分水平居中

flex-pack-justify:子元素两端对齐

兼容性:ios 4+、android 2.3+、winphone8+

============================================================ */

.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}

.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}

.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}

.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}

.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}

.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}

以身作则:两端对齐

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″>

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

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

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

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

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

<style type=”text/css”>

/* ============================================================

flex:定义布局为盒模型

flex-v:盒模型垂直布局

flex-壹:子元素攻下剩余的空中

flex-align-center:子成分垂直居中

flex-pack-center:子成分水平居中

flex-pack-justify:子成分两端对齐

兼容性:ios 4+、android 2.3+、winphone8+

============================================================ */

.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}

.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}

.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}

.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}

.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}

.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}

</style>

</head>

<body>

 

<div class=”flex flex-pack-justify”>

<div>模块一</div>

<div>模块二</div>

<div>模块三</div>

<div>模块四</div>

</div>

 

</body>

</html>

选用注意:flex下的子成分必须为块级成分,非块级成分在android2.三机器下flex失效

参考:

flexyboxes

“老”的Flexbox和“新”的Flexbox

跨浏览器的Flexbox

FastClick

免去在移动浏览器上触发click事件与2个物理Tap(敲击)之间的300延缓

参考《FastClick》

 

此文来自网上摘录(忘记在哪了)

meta 基础知识 H5页面窗口自动调控到装备宽度,并严令禁止用户缩放页面 meta name=”viewport”
content=”width=device-width,initial-scal…

常见难题:

  • 一举手一投足端怎么样定义字体font-family

@ ————————————–汉语字体的英文名称

@ 宋体      SimSun

@ 黑体      SimHei

@ 微信雅黑   Microsoft Yahei

@ 微软正行书 Microsoft JhengHei

@ 新宋体    NSimSun

@ 新细明体  MingLiU

@ 细明体    MingLiU

@ 标楷体    DFKai-SB

@ 仿宋     FangSong

@ 楷体     KaiTi

@ 仿宋_GB2312  FangSong_GB2312

@ 楷体_GB2312  KaiTi_GB2312  

@

@ 表达:汉语字体大多用到草书、雅黑,英文用Helvetica

 

body { font-family: Microsoft Yahei,SimSun,Helvetica; }

通话发短信写邮件怎么落到实处

// 一、打电话

<a href=”tel:075伍-拾0八陆”>打电话给:0755-10086</a>

 

//  二、发短信,winphone系统无效

<a href=”sms:十08陆”>发短信给: 十08陆</a>

 

// 三、写邮件

//注:在增多这几个意义时,第多个效益以”?”先导,前边的以”&”早先

//1.普普通通邮件

<a href=”mailto:86313997八@qq.com”>点击自个儿发邮件</a>

//2.收件地方后增多?cc=开端,可增多抄送地址(Android存在包容难点)

<a
href=”mailto:86313997八@qq.com?cc=zhangqian040六@yeah.net”>点击自个儿发邮件</a>

//三.随即抄送地址后,写上&bcc=,可添加密件抄送地址(Android存在包容难点)

<a
href=”mailto:863139978@qq.com?cc=zhangqian040陆@yeah.net&bcc=3848000玖陆@qq.com”>点击本人发邮件</a>

//四.带有四个收件人、抄送、密件抄送人,用分号(;)隔离三个邮件人的地方

<a
href=”mailto:863139978@qq.com;384柒仟9陆@qq.com”>点击本身发邮件</a>

//伍.包蕴大旨,用?subject=

<a
href=”mailto:863139978@qq.com?subject=邮件主旨”>点击本人发邮件</a>

//陆.包含内容,用?body=;如剧情涵盖文本,使用%0A给文本换行

<a
href=”mailto:863139978@qq.com?body=邮件主旨内容%0A腾讯诚信%0A期待您的来临”>点击自身发邮件</a>

//7.内容包蕴链接,含http(s)://等的公文自动转化为链接

<a
href=”mailto:863139978@qq.com?body=;

//八.剧情涵盖图表(PC不支持)

<a href=”mailto:86313997八@qq.com?body=<img src=’images/一.jpg’
/>”>点击本身发邮件</a>

//9.全部示例

<a
href=”mailto:863139978@qq.com;384900096@qq.com?cc=zhangqian0406@yeah.net&bcc=993233461@qq.com&subject=[邮件主旨]&body=腾讯特邀您加入%0A%0A
src=’images/壹.jpg’ />”>点击自个儿发邮件</a>

移动端touch事件(区分webkit和winphone)

/* 当用户手指放在移动装备在荧屏上海滑稽剧团动会触发的touch事件 */

// 以下协理webkit

touchstart——当手指触碰显示器时候爆发。不管当前某个许只手指

touchmove——当手指在荧屏上海好笑剧团动时连连触发。常常我们再滑屏页面,会调用event的preventDefault()能够阻止暗中认可景况的发出:阻止页面滚动

touchend——当手指离开显示器时接触

touchcancel——系统停止追踪触摸时候会接触。例如在触摸进度中陡然页面alert()三个提示框,此时会触发该事件,那个事件比较少用

 

//TouchEvent说明:

touches:屏幕上具备手指的音讯

targetTouches:手指在对象区域的手指头音信

changedTouches:近来三次触发该事件的指尖消息

touchend时,touches与targetTouches音讯会被删去,changedTouches保存的尾声三次的消息,最佳用于总结手指消息

 

//参数消息(changedTouches[0])

clientX、clientY在彰显区的坐标

target:当前元素

 

//事件响应顺序

ontouchstart  > ontouchmove  > ontouchend > onclick

 

// 以下协理winphone 八

MSPointerDown——当手指触碰显示屏时候发生。不管当前有个别许只手指

MSPointerMove——当手指在荧屏上海滑稽剧团动时老是触发。日常我们再滑屏页面,会调用css的html{-ms-touch-action:
none;}可以阻止私下认可意况的发生:阻止页面滚动

MSPointerUp——当手指离开显示屏时接触

运动端click显示屏发生200-300ms的延时响应

表达:移动装备上的web网页是有300ms延迟的,玩玩会导致开关点击延迟甚至是点击失效。

 

以下是历史原因,来源多个供销合作社内多个同事的分享:

2007年苹果公布首个款式iphone上IOS系统搭载的safari为了将适用于PC端上海大学显示屏的网页能相比好的来得在手提式有线电话机端上,使用了双击缩放(double
tap to
zoom)的方案,比如你在手提式有线电话机上用浏览器张开二个PC上的网页,你只怕在看到页面内容即使能够撑满整个荧屏,然而字体、图片都十分小看不清,此时能够急忙双击显示器上的某一片段,你就能看清该部分放大后的剧情,再一次双击后能回去原来状态。

 

双击缩放是指用手指在屏幕上便捷点击几次,iOS
自带的 Safari 浏览器会将网页缩放至原始比例。

 

缘由就出在浏览器须要哪些推断迅速点击上,当用户在显示屏上单击某二个成分时候,例如跳转链接<a
href=”#”></a>,此处浏览器会先捕获该次单击,但浏览器无法说了算用户是唯有要点击链接或许要双击该有的区域开展缩放操作,所以,捕获第一遍单击后,浏览器会先Hold一段时间t,假设在t时间区间里用户未开始展览下2回点击,则浏览器会做单击跳转链接的拍卖,若是t时间里用户打开了第一回单击操作,则浏览器会禁止跳转,转而开始展览对该部分区域页面包车型客车缩放操作。那么那些时辰区间t有稍许吗?在IOS
safari下,大概为300纳秒。那就是延迟的由来。产生的结果用户纯粹单击页面,页面供给过一段时间才响应,给用户慢体验感觉,对于web开荒者来讲是,页面js捕获click事件的回调函数处理,要求300ms后才生效,也就直接导致影响其余业务逻辑的处理。

 

//消除方案:

fastclick能够消除在手提式无线电话机上点击事件的300ms延迟

zepto的touch模块,tap事件也是为着缓解在click的延期难题

Rentina显示屏原理及设计方案

表达:retina屏是一种具备超高像素密度的液晶屏,同样大小的荧屏上突显的像素点由一个产生四个,如在同等血崩的荧屏上,苹果设备的retina显示器中,像素点二个变为四个。

在高清显示器中的位图被放大,图片会变得模糊,因而活动端的视觉稿平日会计统计一筹划为思想PC的二倍。

那么,前端的回应方案是:设计稿切出来的图片长度宽度保证为偶数,并利用backgroud-size把图纸减少为原本的百分之五10

 

//例如图片宽高为:200px*200px,那么写法如下

.css{width:100px;height:100px;background-size:100px 100px;}

//别的成分的取值为本来的二分之一,例如视觉稿40px的书体,使用样式的写法为20px

.css{font-size:20px}

 

//image-set设计Rentina背景图

image-set,webkit私有质量,也是CSS4的个性,为赶尽杀绝Rentina显示屏下的图像而生。

.css {

    background: url(images/bg.jpg) no-repeat center;

    background: -webkit-image-set(

    url(images/bg.jpg) 1x,     //支持image-set普通屏

    url(images/bg-2x.jpg) 2x); //支持image-set的Rentinan

}

点击成分发生背景或边框怎么去掉

/ios用户点击1个链接,会产出1个半透明银灰遮罩,
若是想要禁止使用,可设置-webkit-tap-highlight-color的阿尔法值为0去除铁锈棕半透明遮罩;

//android用户点击1个链接,会并发一个边框大概半晶莹剔透石磨蓝遮罩,
区别生产商定义出来额效果不相同样,可安装-webkit-tap-highlight-color的阿尔法值为0去除1些机器自带的功能;

//winphone系统,点击标签发生的青绿半透明背景,能透过安装<meta
name=”msapplication-tap-highlight” content=”no”>去掉;

//特殊表达:某些机型去除不了,如Samsung二。对于按键类还有个章程,不使用a恐怕input标签,直接用div标签

a,button,input,textarea {

    -webkit-tap-highlight-color: rgba(0,0,0,0);

    -webkit-user-modify:read-write-plaintext-only;
//-webkit-user-modify有个副效能,就是输入法不再可以输入多少个字符

}   

// 也可以

* { -webkit-tap-highlight-color: rgba(0,0,0,0); }

//winphone下

<meta name=”msapplication-tap-highlight” content=”no”>

说大话表单成分

//1、使用appearance更改webkit浏览器的暗中同意外观

input,select { -webkit-appearance:none; appearance: none; }

 

//2、winphone下,使用伪成分改造表单成分暗中同意外观

//一.禁止使用select暗中同意箭头,::-ms-expand修改表单控件下拉箭头,设置隐藏并行使背景图片来修饰

select::-ms-expand { display:none; }

 

//二.禁止使用radio和checkbox暗许样式,::-ms-check修改表单复选框或单选框默许Logo,设置隐藏并利用背景图片来修饰

input[type=radio]::-ms-check,

input[type=checkbox]::-ms-check { display:none; }

 

//叁.禁止使用pc端表单输入框暗许清除按键,::-ms-clear修改清除按键,设置隐藏并选择背景图片来修饰

input[type=text]::-ms-clear,

input[type=tel]::-ms-clear,

input[type=number]::-ms-clear { display:none; }

运动端字体单位font-size选择px如故rem

// 如需适配两种运动装备,建议利用rem。以下为参考值:

html { font-size: 62.5%; }   //10*16 = 62.5%

//设置1二px字体
  那里注意在rem前要抬高对应的px值,解决不援救rem的浏览器的包容难点,做到优雅降级

body { font-size:12px; font-size:1.2rem; }     

超实用的CSS样式

//去掉webkit的滚动条——display: none;

//别的参数

::-webkit-scrollba //滚动条全部部分

::-webkit-scrollbar-thumb   //滚动条内的小方块

::-webkit-scrollbar-track   //滚动条规则

::-webkit-scrollbar-button  //滚动条规则两端按键

::-webkit-scrollbar-track-piece  //滚动条当中部分,内置轨道

::-webkit-scrollbar-corner       //边角,八个滚动条交汇处

::-webkit-resizer
           //八个滚动条的交界处上用以通过拖动调控成分大小的小控件

 

// 禁止长按链接与图片弹出美食做法

a,img { -webkit-touch-callout: none }    

 

澳门葡京 ,// 禁止ios和android用户选中文字

html,body {-webkit-user-select:none; user-select: none; }

 

// 更动输入框placeholder的颜色值

::-webkit-input-placeholder { /* WebKit browsers */

color: #999; }

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */

color: #999; }

::-moz-placeholder { /* Mozilla Firefox 19+ */

color: #999; }

:-ms-input-placeholder { /* Internet Explorer 10+ */

color: #999; }

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

 

// android上去掉语音输入开关

input::-webkit-input-speech-button {display: none}

 

// 阻止windows Phone的暗中同意触摸事件

/*表达:winphone下私下认可触摸事件事件选择e.preventDefault是船到江心补漏迟的,可通过体制来禁止使用,如:*/

html { -ms-touch-action:none; } //禁止winphone暗中同意触摸事件

 

  • 撤除input在ios下,输入的时候英文首字母的暗中认可大写

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

  • 手提式有线电话机拍片和上传图片

//IOS有油画、摄像、采纳本地图片功效,部分Android唯有选用地面图片成效。Winphone不帮衬

<input type=”file” accept=”images/*” />

<input type=”file” accept=”video/*” />

显示器旋转的风云和样式

//JS处理

function orientInit(){

    var orientChk = document.documentElement.clientWidth >
document.documentElement.clientHeight?’landscape’:’portrait’;

    if(orientChk ==’lapdscape’){

        //那里是横屏下须求施行的轩然大波

    }else{

        //这里是竖屏下要求试行的风浪

    }

}

 

orientInit();

window.addEventListener(‘onorientationchange’ in
window?’orientationchange’:’resize’, function(){

    setTimeout(orientInit, 100);

},false)    

 

//CSS处理

//竖屏时样式

@media all and (orientation:portrait){   }

//横屏时样式

@media all and (orientation:landscape){   }

audio成分和video成分在ios和andriod中不能够自动播放

//音频,写法一

<audio src=”music/bg.mp三” autoplay loop
controls>你的浏览器还不支持啊</audio>

 

//音频,写法二

<audio controls=”controls”>

    <source src=”music/bg.ogg” type=”audio/ogg”></source>

    <source src=”music/bg.mp3″ type=”audio/mpeg”></source>

    优先播放音乐bg.ogg,不支持在播报bg.mp三

</audio>

 

//JS绑定自动播放(操作window时,播放音乐)

$(window).one(‘touchstart’, function(){

    music.play();

})

 

//微信下兼容处理

document.addEventListener(“WeixinJSBridgeReady”, function () {

    music.play();

}, false);

 

//小结

//一.audio成分的autoplay属性在IOS及Android上不或许利用,在PC端符合规律

//贰.audio元素从未有过设置controls时,在IOS及Android会攻下空间大小,而在PC端Chrome是不会据有任何空间

重力影响事件

// 运用HTML5的deviceMotion,调用引力感应事件

if(window.DeviceMotionEvent){

    document.addEventListener(‘devicemotion’, deviceMotionHandler,
false)

}   

 

var speed = 30;

var x = y = z = lastX = lastY = lastZ = 0;

function deviceMotionHandler(eventData){

    var acceleration = event.accelerationIncludingGravity;

    x = acceleration.x;

    y = acceleration.y;

    z = acceleration.z;

    if(Math.abs(x-lastX)>speed || Math.abs(y-lastY)>speed ||
Math.abs(z-lastZ)>speed ){

        //那里是忽悠后要举办的艺术

        yaoAfter();

    }

    lastX = x;

    lastY = y;

    lastZ = z;

}

 

function yaoAfter(){

    //do something

}

 

//表达:说见案例摇1摇效果中yao.js

微信浏览器用户调控字体大小后页面矬了,怎么阻止用户调控

//以下代码可使Android机页面不再受用户字体缩放强制退换大小,但是会有一S左右延时,期间能够驰念loading来处理

if (typeof(WeixinJSBridge) == “undefined”) {

    document.addEventListener(“WeixinJSBridgeReady”, function (e) {

        setTimeout(function(){

            WeixinJSBridge.invoke(‘setFontSizeCallback’, {
‘fontSize’:0}, function(res){

                alert(JSON.stringify(res));

            })

        }, 0)

    });

}else{  

    setTimeout(function(){

        WeixinJSBridge.invoke(‘setFontSizeCallback’, { ‘fontSize’:0},
function(res){

            alert(JSON.stringify(res));

        })

    }, 0)   

}

 

//IOS下可接纳 -webkit-text-size-adjust禁止用户调节字体大小

body { -webkit-text-size-adjust:100%!important; }

 

//最棒的解决方案:最佳使用rem或比重搭架子

定位的坑

//fixed定位

//一.ios下fixed成分轻便定位出错,软键盘弹出时,影响fixed成分定位

//二.android下fixed表现要比iOS更加好,软键盘弹出时,不会潜移默化fixed成分定位

//三.ios四下不帮衬position:fixed

//解决方案:使用[Iscroll](

<div id=”wrapper”>

        <ul>

               <li></li>

               …..

        </ul>

</div>

<script src=”iscroll.js”></script>

<script>

    var myscroll;

    function loaded(){

        myscroll=new iScroll(“wrapper”);

    }

    window.addEventListener(“DOMContentLoaded”,loaded,false);

</script>

 

 

//position定位

//Android下弹出软键盘弹出时,影响absolute成分定位

//消除方案:

var ua = navigator.userAgent.indexOf(‘Android’);

if(ua>-1){

    $(‘.ipt’).on(‘focus’, function(){

        $(‘.css’).css({‘visibility’:’hidden’})

    }).on(‘blur’, function(){

        $(‘.css’).css({‘visibility’:’visible’})

    })

}

播音摄像不全屏

<!–

1.ios柒+辅助自动播放

2.支持Airplay的设备(如:音箱、Apple TV)播放

x-webkit-airplay=”true”

三.播放录像不全屏

webkit-playsinline=”true”

–>

<video x-webkit-airplay=”true” webkit-playsinline=”true”
preload=”auto” autoplay src=”;

JS判别设备

function deviceType(){

    var ua = navigator.userAgent;

    var agent = [“Android”, “iPhone”, “SymbianOS”, “Windows Phone”,
“iPad”, “iPod”];    

    for(var i=0; i<len,len = agent.length; i++){

        if(ua.indexOf(agent[i])>0){         

            break;

        }

    }

}

deviceType();

window.addEventListener(‘resize’, function(){

    deviceType();

})

JS决断微信浏览器

function isWeixin(){

    var ua = navigator.userAgent.toLowerCase();

    if(ua.match(/MicroMessenger/i)==’micromessenger’){

        return true;

    }else{

        return false;

    }

}

android 2.3 bug

//1.@-webkit-keyframes 供给以0%方始百分百了事,0%的百分号不可能去掉

//2.after和before伪类不可能运用动画animation

//三.border-radius不援救%单位,如要包容,能够给radius设置一下较大的值

//四.translate比例的写法和scale在联合具名会招致失效,例如:

-webkit-transform: translate(-50%,-50%) scale(-0.5, 1)

android 4.x bug

//一.三星(Samsung) Galaxy S四中自带浏览器不帮衬border-radius缩写

//二.同时设置border-radius和背景象的时候,背景观会溢出到圆角以外部分

//三.有个别手提式无线电话机(如Samsung),a链接帮助鼠标:visited事件,也正是说链接待上访问后文字变为宝石蓝

//四.android不恐怕同时播报多音频audio

消除transition闪屏

.css {

    -webkit-transform-style: preserve-3d;

    -webkit-backface-visibility: hidden;

    -webkit-perspective: 1000;

}

翻开硬件加快

//近来,像Chrome/Filefox/Safari/IE九+以及新型版本Opera都援救硬件加快,当检查测试到有个别DOM成分运用了几许CSS规则时就会自动开启,从而消除页面闪白,有限支撑动画流畅。

.css {

    -webkit-transform: translate3d(0,0,0);

    -moz-transform: translate3d(0,0,0);

    -ms-transform: translate3d(0,0,0);

    transform: translate3d(0,0,0);

}

渲染优化

//1.禁用iframe(阻塞父文书档案onload事件)

//二.禁止使用gif图片完结loading效果(下降CPU消耗,提高渲染品质)

//使用CSS叁代码代替JS动画;

//开启GPU加速;

//使用base61位编码图片(十分大图来说,大图不建议选用)

    //
对于1些小图标,能够动用base63人编码,以减掉网络请求。但不建议大图使用,比较开支CPU。小Logo优势在于:

    //1.减少HTTP请求;

    //二.幸免文件跨域;

    //三.修改及时生效;

 

普及难题:

  • 运动端怎样定义字体font-family

@ ————————————–汉语字体的英文名称

@ 宋体      SimSun

@ 黑体      SimHei

@ 微信雅黑   Microsoft Yahei

@ 微软正草书 Microsoft JhengHei

@ 新宋体    NSimSun

@ 新细明体  MingLiU

@ 细明体    MingLiU

@ 标楷体    DFKai-SB

@ 仿宋     FangSong

@ 楷体     KaiTi

@ 仿宋_GB2312  FangSong_GB2312

@ 楷体_GB2312  KaiTi_GB2312  

@

@ 表明:中文字体大多选取金鼎文、雅黑,英文用Helvetica

 

body { font-family: Microsoft Yahei,SimSun,Helvetica; }

打电话发短信写邮件怎么落实

// 一、打电话

<a href=”tel:0755-十0八六”>打电话给:075伍-10086</a>

 

//  2、发短信,winphone系统无效

<a href=”sms:十0八六”>发短信给: 1008陆</a>

 

// 三、写邮件

//注:在累加那一个功能时,第3个效用以”?”开头,后边的以”&”开首

//1.平日邮件

<a href=”mailto:863139978@qq.com”>点击自个儿发邮件</a>

//二.收件地点后增加?cc=起首,可加多抄送地址(Android存在包容难点)

<a
href=”mailto:86313997八@qq.com?cc=zhangqian040陆@yeah.net”>点击本身发邮件</a>

//三.跟着抄送地址后,写上&bcc=,可增多密件抄送地址(Android存在兼容难点)

<a
href=”mailto:86313997八@qq.com?cc=zhangqian040陆@yeah.net&bcc=3847000玖陆@qq.com”>点击自己发邮件</a>

//4.包罗多少个收件人、抄送、密件抄赠给外人,用分号(;)隔断多少个邮件人的地点

<a
href=”mailto:86313997捌@qq.com;384九千玖6@qq.com”>点击自身发邮件</a>

//伍.包罗核心,用?subject=

<a
href=”mailto:86313997八@qq.com?subject=邮件大旨”>点击自个儿发邮件</a>

//6.包罗内容,用?body=;还是事情节涵盖文本,使用%0A给文本换行

<a
href=”mailto:863139978@qq.com?body=邮件宗旨内容%0A腾讯诚信%0A期待您的来临”>点击本身发邮件</a>

//七.内容包涵链接,含http(s)://等的文书自动转接为链接

<a
href=”mailto:863139978@qq.com?body=;

//八.内容包括图表(PC不补助)

<a href=”mailto:86313997八@qq.com?body=<img src=’images/一.jpg’
/>”>点击本身发邮件</a>

//玖.总体示例

<a
href=”mailto:863139978@qq.com;384900096@qq.com?cc=zhangqian0406@yeah.net&bcc=993233461@qq.com&subject=[邮件大旨]&body=腾讯特邀您参与%0A%0A
src=’images/一.jpg’ />”>点击本人发邮件</a>

移动端touch事件(区分webkit和winphone)

/* 当用户手指放在移动设备在荧屏上海滑稽剧团动会触发的touch事件 */

// 以下协助webkit

touchstart——当手指触碰显示屏时候产生。不管当前有些许只手指

touchmove——当手指在显示器上海滑稽剧团动时老是触发。常常大家再滑屏页面,会调用event的preventDefault()能够阻止私下认可意况的发出:阻止页面滚动

touchend——当手指离开荧屏时接触

touchcancel——系统结束追踪触摸时候会接触。例如在触摸进程中忽然页面alert()三个提醒框,此时会触发该事件,这些事件相比较少用

 

//TouchEvent说明:

touches:显示屏上全部手指的音信

targetTouches:手指在指标区域的手指头音信

changedTouches:方今一遍触发该事件的手指音信

touchend时,touches与targetTouches消息会被删除,changedTouches保存的最终1次的音信,最佳用于总括手指音信

 

//参数音信(changedTouches[0])

clientX、clientY在彰显区的坐标

target:当前因素

 

//事件响应顺序

ontouchstart  > ontouchmove  > ontouchend > onclick

 

// 以下协助winphone 捌

MSPointerDown——当手指触碰显示器时候发出。不管当前有多少只手指

MSPointerMove——当手指在显示器上海滑稽剧团动时老是触发。经常我们再滑屏页面,会调用css的html{-ms-touch-action:
none;}能够阻止默许情形的发生:阻止页面滚动

MSPointerUp——当手指离开荧屏时接触

一举手一投足端click显示屏发生200-300ms的延时响应

表明:移动设备上的web网页是有300ms延迟的,玩玩会招致开关点击延迟甚至是点击失效。

 

以下是野史由来,来源三个厂家内一个同事的分享:

2007年苹果公布第壹个款式iphone上IOS系统搭载的safari为了将适用于PC端上海大学显示器的网页能比较好的体今后手提式有线电话机端上,使用了双击缩放(double
tap to
zoom)的方案,比如您在二弟大上用浏览器张开叁个PC上的网页,你恐怕在探望页面内容即使能够撑满整个显示器,不过字体、图片都非常小看不清,此时得以火速双击屏幕上的某壹有个别,你就能看清该有的放大后的剧情,再次双击后能重临原来状态。

 

双击缩放是指用手指在荧屏上海飞机成立厂速点击五次,iOS
自带的 Safari 浏览器会将网页缩放至原始比例。

 

原因就出在浏览器必要怎样判别赶快点击上,当用户在荧屏上单击某3个因素时候,例如跳转链接<a
href=”#”></a>,此处浏览器会先捕获该次单击,但浏览器不可能调控用户是只是要点击链接或许要双击该有的区域打开缩放操作,所以,捕获第3回单击后,浏览器会先Hold一段时间t,假诺在t时间区间里用户未进行下1回点击,则浏览器会做单击跳转链接的拍卖,假设t时间里用户实行了第3次单击操作,则浏览器会禁止跳转,转而张开对该有的区域页面包车型地铁缩放操作。那么那几个时刻区间t有微微呢?在IOS
safari下,大致为300微秒。那正是延迟的由来。产生的后果用户纯粹单击页面,页面须要过壹段时间才响应,给用户慢体验以为,对于web开荒者来讲是,页面js捕获click事件的回调函数处理,须要300ms后才生效,也就直接导致影响其它事情逻辑的拍卖。

 

//消除方案:

fastclick可以解决在四哥大上点击事件的300ms延迟

zepto的touch模块,tap事件也是为着缓解在click的推移难点

Rentina显示器原理及设计方案

证实:retina屏是1种具备超高像素密度的液晶屏,同样大小的显示器上海展览中心示的像素点由一个形成多少个,如在一样夜盲的显示屏上,苹果设备的retina显示器中,像素点3个形成八个。

在高清显示器中的位图被加大,图片会变得模糊,因而活动端的视觉稿平常会规划为观念PC的二倍。

那么,前端的作答方案是:设计稿切出来的图纸长度宽度保证为偶数,并选取backgroud-size把图片缩短为本来的二分之一

 

//例如图片宽高为:200px*200px,那么写法如下

.css{width:100px;height:100px;background-size:100px 100px;}

//别的成分的取值为本来的3/6,例如视觉稿40px的书体,使用样式的写法为20px

.css{font-size:20px}

 

//image-set设计Rentina背景图

image-set,webkit私有品质,也是CSS肆的特性,为焚林而猎Rentina显示器下的图像而生。

.css {

    background: url(images/bg.jpg) no-repeat center;

    background: -webkit-image-set(

    url(images/bg.jpg) 1x,     //支持image-set普通屏

    url(images/bg-2x.jpg) 2x); //支持image-set的Rentinan

}

点击成分发生背景或边框怎么去掉

/ios用户点击叁个链接,汇合世八个半晶莹剔透灰色遮罩,
如若想要禁止使用,可安装-webkit-tap-highlight-color的阿尔法值为0去严月光蓝半透明遮罩;

//android用户点击二个链接,会现出三个边框可能半透明蓝绿遮罩,
差异生产商定义出来额效果不均等,可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的作用;

//winphone系统,点击标签爆发的紫色半透明背景,能经过安装<meta
name=”msapplication-tap-highlight” content=”no”>去掉;

//特殊表明:有些机型去除不了,如One plus2。对于开关类还有个主意,不使用a或然input标签,直接用div标签

a,button,input,textarea {

    -webkit-tap-highlight-color: rgba(0,0,0,0);

    -webkit-user-modify:read-write-plaintext-only;
//-webkit-user-modify有个副作用,就是输入法不再能够输入五个字符

}   

// 也可以

* { -webkit-tap-highlight-color: rgba(0,0,0,0); }

//winphone下

<meta name=”msapplication-tap-highlight” content=”no”>

吹捧表单成分

//1、使用appearance改动webkit浏览器的私下认可外观

input,select { -webkit-appearance:none; appearance: none; }

 

//贰、winphone下,使用伪成分改造表单成分默许外观

//1.禁止使用select暗许箭头,::-ms-expand修改表单控件下拉箭头,设置隐藏并动用背景图片来修饰

select::-ms-expand { display:none; }

 

//贰.禁止使用radio和checkbox私下认可样式,::-ms-check修改表单复选框或单选框默许Logo,设置隐藏并运用背景图片来修饰

input[type=radio]::-ms-check,

input[type=checkbox]::-ms-check { display:none; }

 

//3.禁止使用pc端表单输入框暗许清除按键,::-ms-clear修改清除开关,设置隐藏并应用背景图片来修饰

input[type=text]::-ms-clear,

input[type=tel]::-ms-clear,

input[type=number]::-ms-clear { display:none; }

移动端字体单位font-size选用px依旧rem

// 如需适配各种移动设备,提出使用rem。以下为参考值:

html { font-size: 62.5%; }   //10*16 = 62.5%

//设置1二px字体
  那里注目的在于rem前要丰硕对应的px值,消除不帮忙rem的浏览器的兼容难点,做到优雅降级

body { font-size:12px; font-size:1.2rem; }     

超实用的CSS样式

//去掉webkit的滚动条——display: none;

//别的参数

::-webkit-scrollba //滚动条全部部分

::-webkit-scrollbar-thumb   //滚动条内的小方块

::-webkit-scrollbar-track   //滚动条轨道

::-webkit-scrollbar-button  //滚动条轨道两端按键

::-webkit-scrollbar-track-piece  //滚动条当中部分,内置轨道

::-webkit-scrollbar-corner       //边角,三个滚动条交汇处

::-webkit-resizer
           //三个滚动条的交界处上用以通过拖动调整成分大小的小控件

 

// 禁止长按链接与图片弹出菜谱

a,img { -webkit-touch-callout: none }    

 

// 禁止ios和android用户选普通话字

html,body {-webkit-user-select:none; user-select: none; }

 

// 退换输入框placeholder的颜色值

::-webkit-input-placeholder { /* WebKit browsers */

color: #999; }

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */

color: #999; }

::-moz-placeholder { /* Mozilla Firefox 19+ */

color: #999; }

:-ms-input-placeholder { /* Internet Explorer 10+ */

color: #999; }

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

 

// android上去掉语音输入开关

input::-webkit-input-speech-button {display: none}

 

// 阻止windows Phone的默许触摸事件

/*证实:winphone下暗中认可触摸事件事件接纳e.preventDefault是无效的,可经过体制来禁止使用,如:*/

html { -ms-touch-action:none; } //禁止winphone暗中认可触摸事件

 

  • 注销input在ios下,输入的时候英文首字母的默许大写

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

  • 手提式有线话机拍照和上传图片

//IOS有拍照、摄像、采纳本地图片功能,部分Android唯有采用本地图片效率。Winphone不帮助

<input type=”file” accept=”images/*” />

<input type=”file” accept=”video/*” />

显示器旋转的风浪和样式

//JS处理

function orientInit(){

    var orientChk = document.documentElement.clientWidth >
document.documentElement.clientHeight?’landscape’:’portrait’;

    if(orientChk ==’lapdscape’){

        //那里是横屏下供给施行的轩然大波

    }else{

        //那里是竖屏下需求实践的轩然大波

    }

}

 

orientInit();

window.addEventListener(‘onorientationchange’ in
window?’orientationchange’:’resize’, function(){

    setTimeout(orientInit, 100);

},false)    

 

//CSS处理

//竖屏时样式

@media all and (orientation:portrait){   }

//横屏时样式

@media all and (orientation:landscape){   }

audio成分和video成分在ios和andriod中不能够自动播放

//音频,写法一

<audio src=”music/bg.mp3″ autoplay loop
controls>你的浏览器还不匡助啊</audio>

 

//音频,写法二

<audio controls=”controls”>

    <source src=”music/bg.ogg” type=”audio/ogg”></source>

    <source src=”music/bg.mp3″ type=”audio/mpeg”></source>

    优先播放音乐bg.ogg,不辅助在播音bg.mp三

</audio>

 

//JS绑定自动播放(操作window时,播放音乐)

$(window).one(‘touchstart’, function(){

    music.play();

})

 

//微信下包容处理

document.addEventListener(“WeixinJSBridgeReady”, function () {

    music.play();

}, false);

 

//小结

//1.audio成分的autoplay属性在IOS及Android上不能利用,在PC端符合规律

//贰.audio成分未曾安装controls时,在IOS及Android会占领空间大小,而在PC端Chrome是不会占领任何空间

重力感应事件

// 运用HTML伍的deviceMotion,调用动力影响事件

if(window.DeviceMotionEvent){

    document.addEventListener(‘devicemotion’, deviceMotionHandler,
false)

}   

 

var speed = 30;

var x = y = z = lastX = lastY = lastZ = 0;

function deviceMotionHandler(eventData){

    var acceleration = event.accelerationIncludingGravity;

    x = acceleration.x;

    y = acceleration.y;

    z = acceleration.z;

    if(Math.abs(x-lastX)>speed || Math.abs(y-lastY)>speed ||
Math.abs(z-lastZ)>speed ){

        //那里是忽悠后要施行的办法

        yaoAfter();

    }

    lastX = x;

    lastY = y;

    lastZ = z;

}

 

function yaoAfter(){

    //do something

}

 

//表达:说见案例摇1摇效果中yao.js

微信浏览器用户调控字体大小后页面矬了,怎么阻止用户调节

//以下代码可使Android机页面不再受用户字体缩放强制更动大小,然而会有1S左右延时,时期能够设想loading来拍卖

if (typeof(WeixinJSBridge) == “undefined”) {

    document.addEventListener(“WeixinJSBridgeReady”, function (e) {

        setTimeout(function(){

            WeixinJSBridge.invoke(‘setFontSizeCallback’, {
‘fontSize’:0}, function(res){

                alert(JSON.stringify(res));

            })

        }, 0)

    });

}else{  

    setTimeout(function(){

        WeixinJSBridge.invoke(‘setFontSizeCallback’, { ‘fontSize’:0},
function(res){

            alert(JSON.stringify(res));

        })

    }, 0)   

}

 

//IOS下可利用 -webkit-text-size-adjust禁止用户调控字体大小

body { -webkit-text-size-adjust:100%!important; }

 

//最佳的缓解方案:最棒使用rem或比重搭架子

长久的坑

//fixed定位

//一.ios下fixed成分轻松定位出错,软键盘弹出时,影响fixed成分定位

//二.android下fixed表现要比iOS越来越好,软键盘弹出时,不会潜移默化fixed成分定位

//3.ios四下不扶助position:fixed

//化解方案:使用[Iscroll](

<div id=”wrapper”>

        <ul>

               <li></li>

               …..

        </ul>

</div>

<script src=”iscroll.js”></script>

<script>

    var myscroll;

    function loaded(){

        myscroll=new iScroll(“wrapper”);

    }

    window.addEventListener(“DOMContentLoaded”,loaded,false);

</script>

 

 

//position定位

//Android下弹出软键盘弹出时,影响absolute成分定位

//化解方案:

var ua = navigator.userAgent.indexOf(‘Android’);

if(ua>-1){

    $(‘.ipt’).on(‘focus’, function(){

        $(‘.css’).css({‘visibility’:’hidden’})

    }).on(‘blur’, function(){

        $(‘.css’).css({‘visibility’:’visible’})

    })

}

广播摄像不全屏

<!–

1.ios7+帮衬自动播放

2.支持Airplay的设备(如:音箱、Apple TV)播放

x-webkit-airplay=”true”

三.播放摄像不全屏

webkit-playsinline=”true”

–>

<video x-webkit-airplay=”true” webkit-playsinline=”true”
preload=”auto” autoplay src=”;

JS决断设备

function deviceType(){

    var ua = navigator.userAgent;

    var agent = [“Android”, “iPhone”, “SymbianOS”, “Windows Phone”,
“iPad”, “iPod”];    

    for(var i=0; i<len,len = agent.length; i++){

        if(ua.indexOf(agent[i])>0){         

            break;

        }

    }

}

deviceType();

window.addEventListener(‘resize’, function(){

    deviceType();

})

JS剖断微信浏览器

function isWeixin(){

    var ua = navigator.userAgent.toLowerCase();

    if(ua.match(/MicroMessenger/i)==’micromessenger’){

        return true;

    }else{

        return false;

    }

}

android 2.3 bug

//一.@-webkit-keyframes 供给以0%起来百分百完工,0%的百分号无法去掉

//二.after和before伪类不能使用动画animation

//三.border-radius不帮助%单位,如要包容,可以给radius设置一下较大的值

//四.translate比例的写法和scale在壹块会促成失效,例如:

-webkit-transform: translate(-50%,-50%) scale(-0.5, 1)

android 4.x bug

//壹.Samsung Galaxy S肆中自带浏览器不协助border-radius缩写

//2.还要设置border-radius和背景观的时候,背景象会溢出到圆角以外部分

//三.片段手提式有线话机(如Samsung),a链接援救鼠标:visited事件,也正是说链接待上访问后文字变为金黄

//四.android无法同时播报多音频audio

消除transition闪屏

.css {

    -webkit-transform-style: preserve-3d;

    -webkit-backface-visibility: hidden;

    -webkit-perspective: 1000;

}

打开硬件加快

//如今,像Chrome/Filefox/Safari/IE玖+以及新型版本Opera都协理硬件加速,当检查测试到有些DOM成分选择了一些CSS规则时就会自行开启,从而化解页面闪白,保险动画流畅。

.css {

    -webkit-transform: translate3d(0,0,0);

    -moz-transform: translate3d(0,0,0);

    -ms-transform: translate3d(0,0,0);

    transform: translate3d(0,0,0);

}

渲染优化

//壹.禁用iframe(阻塞父文书档案onload事件)

//二.禁用gif图片落成loading效果(下跌CPU消耗,提高渲染质量)

//使用CSS3代码代替JS动画;

//开启GPU加速;

//使用base六十五位编码图片(非常的大图来讲,大图不提议选拔)

    //
对于部分小Logo,能够选用base611人编码,以减小互联网请求。但不建议大图使用,相比开销CPU。小Logo优势在于:

    //1.减少HTTP请求;

    //二.制止文件跨域;

    //三.修改及时生效;

 

Meta基础知识:

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

//1、HTML页面结构

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

// width    设置viewport宽度,为三个正整数,或字符串‘device-width’

// height
  设置viewport中度,一般安装了大幅,会活动分析出惊人,能够毫不安装

// initial-scale    暗中同意缩放比例,为二个数字,能够带小数

// minimum-scale    允许用户最小缩放比例,为1个数字,能够带小数

// maximum-scale    允许用户最大缩放比例,为一个数字,能够带小数

// user-scalable    是或不是允许手动缩放

 

//2、JS动态判断

var phoneWidth =  parseInt(window.screen.width);

var phoneScale = phoneWidth/640;

var ua = navigator.userAgent;

if (/Android (\d+\.\d+)/.test(ua)){

    var version = parseFloat(RegExp.$1);

    if(version>2.3){

        document.write(‘<meta name=”viewport” content=”width=640,
minimum-scale = ‘+phoneScale+’, maximum-scale = ‘+phoneScale+’,
target-densitydpi=device-dpi”>’);

    }else{

        document.write(‘<meta name=”viewport” content=”width=640,
target-densitydpi=device-dpi”>’);

    }

} else {

    document.write(‘<meta name=”viewport” content=”width=640,
user-scalable=no, target-densitydpi=device-dpi”>’);

}

空白页基本meta标签

<!– 设置缩放 –>

<meta name=”viewport” content=”width=device-width, initial-scale=1,
user-scalable=no, minimal-ui” />

<!–
可隐藏地址栏,仅针对IOS的Safari(注:IOS七.0本子之后,safari季春看不到效果)
–>

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

<!–
仅针对IOS的Safari顶端状态条的样式(可选default/black/black-translucent
) –>

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

<!– IOS中禁止使用将数字识别为电话号码/忽略Android平布里斯托对邮箱地址的鉴定区别–>

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

其他meta标签

<!– 启用360浏览器的极速情势(webkit) –>

<meta name=”renderer” content=”webkit”>

<!– 防止IE使用至极情势 –>

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

<!–
针对手持设备优化,主固然针对性有个别老的不识别viewport的浏览器,比如金立–>

<meta name=”HandheldFriendly” content=”true”>

<!– 微软的老式浏览器 –>

<meta name=”MobileOptimized” content=”320″>

<!– uc强制竖屏 –>

<meta name=”screen-orientation” content=”portrait”>

<!– QQ强制竖屏 –>

<meta name=”x5-orientation” content=”portrait”>

<!– UC强制全屏 –>

<meta name=”full-screen” content=”yes”>

<!– QQ强制全屏 –>

<meta name=”x5-fullscreen” content=”true”>

<!– UC应用情势 –>

<meta name=”browsermode” content=”application”>

<!– QQ应用形式 –>

<meta name=”x5-page-mode” content=”app”>

<!– windows phone 点击无高光 –>

<meta name=”msapplication-tap-highlight” content=”no”>

 

广大难点:

  • 移动端怎样定义字体font-family

@ ————————————–普通话字体的英文名称

@ 宋体      SimSun

@ 黑体      SimHei

@ 微信雅黑   Microsoft Yahei

@ 微软正甲骨文 Microsoft JhengHei

@ 新宋体    NSimSun

@ 新细明体  MingLiU

@ 细明体    MingLiU

@ 标楷体    DFKai-SB

@ 仿宋     FangSong

@ 楷体     KaiTi

@ 仿宋_GB2312  FangSong_GB2312

@ 楷体_GB2312  KaiTi_GB2312  

@

@ 表达:汉语字体大多运用宋体、雅黑,英文用Helvetica

 

body { font-family: Microsoft Yahei,SimSun,Helvetica; }

通话发短信写邮件怎么落到实处

// 一、打电话

<a href=”tel:0755-拾0八陆”>打电话给:075五-100⑧陆</a>

 

//  2、发短信,winphone系统无效

<a href=”sms:十0八6″>发短信给: 10086</a>

 

// 三、写邮件

//注:在累加这么些功用时,第3个成效以”?”先河,前面包车型客车以”&”初步

//一.家常邮件

<a
href=”mailto:[email protected]”>点击本人发邮件</a>

//二.收件地方后加多?cc=开首,可增添抄送地址(Android存在包容难题)

<a
href=”mailto:[email protected][email protected]”>点击自身发邮件</a>

//三.随后抄送地址后,写上&bcc=,可加多密件抄送地址(Android存在包容问题)

<a
href=”mailto:[email protected][email protected]&[email protected]”>点击自身发邮件</a>

//四.包罗多少个收件人、抄送、密件抄送给别人,用分号(;)隔开分离八个邮件人的地方

<a
href=”mailto:[email protected];[email protected]”>点击自个儿发邮件</a>

//5.包蕴主旨,用?subject=

<a
href=”mailto:[email protected]?subject=邮件宗旨”>点击本身发邮件</a>

//陆.包涵内容,用?body=;如剧情包蕴文本,使用%0A给文本换行

<a
href=”mailto:[email protected]?body=邮件焦点内容%0A腾讯诚信%0A期待您的赶来”>点击自个儿发邮件</a>

//7.内容包罗链接,含http(s)://等的公文自动转接为链接

<a
href=”mailto:[email protected]?body=;

//八.内容包括图表(PC不援助)

<a
href=”mailto:[email protected]?body=<img
src=’images/壹.jpg’ />”>点击本人发邮件</a>

//玖.完全示例

<a
href=”mailto:[email protected];[email protected][email protected]&[email protected]&subject=[邮件焦点]&body=腾讯约请你参与%0A%0A
src=’images/1.jpg’ />”>点击本身发邮件</a>

移动端touch事件(区分webkit和winphone)

/* 当用户手指放在移动设备在荧屏上海好笑剧团动会触发的touch事件 */

// 以下协理webkit

touchstart——当手指触碰显示器时候发出。不管当前有稍许只手指

touchmove——当手指在显示器上海滑稽剧团动时总是触发。通常大家再滑屏页面,会调用event的preventDefault()能够阻碍私下认可情状的爆发:阻止页面滚动

touchend——当手指离开显示屏时接触

touchcancel——系统结束追踪触摸时候会触发。例如在触摸进程中突然页面alert()3个提醒框,此时会触发该事件,那么些事件比较少用

 

//TouchEvent说明:

touches:显示器上独具手指的消息

targetTouches:手指在对象区域的指头音信

changedTouches:近年来三次触发该事件的手指头音讯

touchend时,touches与targetTouches音信会被剔除,changedTouches保存的末梢二回的音信,最棒用于计算手指消息

 

//参数音讯(changedTouches[0])

clientX、clientY在突显区的坐标

target:当前成分

 

//事件响应顺序

ontouchstart  > ontouchmove  > ontouchend > onclick

 

// 以下辅助winphone 捌

MSPointerDown——当手指触碰屏幕时候发出。不管当前有稍许只手指

MSPointerMove——当手指在荧屏上海滑稽剧团动时连连触发。平常大家再滑屏页面,会调用css的html{-ms-touch-action:
none;}可以阻碍暗许情形的发出:阻止页面滚动

MSPointerUp——当手指离开显示器时接触

活动端click屏幕发出200-300ms的延时响应

申明:移动设备上的web网页是有300ms延迟的,玩玩会招致按键点击延迟甚至是点击失效。

 

以下是历史由来,来源3个供销合作社内3个同事的享受:

2007年苹果揭橥第一款iphone上IOS系统搭载的safari为了将适用于PC端上海高校荧屏的网页能相比好的来得在三弟大端上,使用了双击缩放(double
tap to
zoom)的方案,比如你在手提式有线电话机上用浏览器展开一个PC上的网页,你大概在见到页面内容尽管能够撑满整个显示器,但是字体、图片都异常的小看不清,此时能够火速双击荧屏上的某1有的,你就能看清该有的放大后的剧情,再次双击后能回到原有状态。

 

双击缩放是指用手指在显示屏上海飞机成立厂快点击一回,iOS 自带的 Safari
浏览器会将网页缩放至原始比例。

 

缘由就出在浏览器须要什么样推断急迅点击上,当用户在荧屏上单击某一个因素时候,例如跳转链接<a
href=”#”></a>,此处浏览器会先捕获该次单击,但浏览器无法决定用户是仅仅要点击链接或许要双击该片段区域开始展览缩放操作,所以,捕获第3回单击后,浏览器会先Hold一段时间t,如若在t时间区间里用户未开始展览下二遍点击,则浏览器会做单击跳转链接的拍卖,假设t时间里用户进行了第三遍单击操作,则浏览器会禁止跳转,转而开始展览对该有的区域页面包车型大巴缩放操作。那么那几个小时区间t有多少啊?在IOS
safari下,大约为300阿秒。那就是延迟的由来。形成的后果用户纯粹单击页面,页面必要过一段时间才响应,给用户慢体验感到,对于web开荒者来说是,页面js捕获click事件的回调函数处理,必要300ms后才生效,也就直接导致影响别的业务逻辑的处理。

 

//化解方案:

fastclick可以缓解在手提式有线电话机上点击事件的300ms延迟

zepto的touch模块,tap事件也是为着化解在click的延期难题

Rentina显示屏原理及设计方案

表明:retina屏是一种具备超高像素密度的液晶屏,一样大小的荧屏上显得的像素点由三个变为多个,如在同一水肿的荧屏上,苹果设备的retina显示屏中,像素点3个变为五个。

在高清显示器中的位图被推广,图片会变得模糊,因而活动端的视觉稿平常会计统计一筹划为古板PC的二倍。

那就是说,前端的回复方案是:设计稿切出来的图形长度宽度保险为偶数,并使用backgroud-size把图纸减少为原本的八分之四

 

//例如图片宽高为:200px*200px,那么写法如下

.css{width:100px;height:100px;background-size:100px 100px;}

//别的成分的取值为原本的4/8,例如视觉稿40px的书体,使用样式的写法为20px

.css{font-size:20px}

 

//image-set设计Rentina背景图

image-set,webkit私有总体性,也是CSS四的性质,为消除Rentina荧屏下的图像而生。

.css {

    background: url(images/bg.jpg) no-repeat center;

    background: -webkit-image-set(

    url(images/bg.jpg) 1x,     //支持image-set普通屏

    url(images/bg-2x.jpg) 2x); //支持image-set的Rentinan

}

点击成分发生背景或边框怎么去掉

/ios用户点击多少个链接,会冒出叁个半透明大青遮罩,
假诺想要禁用,可设置-webkit-tap-highlight-color的阿尔法值为0去除淡青半透明遮罩;

//android用户点击三个链接,会现出3个边框大概半晶莹剔透青蓝遮罩,
差异生产商定义出来额效果不等同,可安装-webkit-tap-highlight-color的阿尔法值为0去除壹些机器自带的意义;

//winphone系统,点击标签发生的绿色半透明背景,能经过安装<meta
name=”msapplication-tap-highlight” content=”no”>去掉;

//特殊表明:有个别机型去除不了,如黑莓2。对于按键类还有个艺术,不使用a或然input标签,直接用div标签

a,button,input,textarea {

    -webkit-tap-highlight-color: rgba(0,0,0,0);

    -webkit-user-modify:read-write-plaintext-only;
//-webkit-user-modify有个副作用,就是输入法不再能够输入几个字符

}   

// 也可以

* { -webkit-tap-highlight-color: rgba(0,0,0,0); }

//winphone下

<meta name=”msapplication-tap-highlight” content=”no”>

美化表单成分

//1、使用appearance更换webkit浏览器的暗中同意外观

input,select { -webkit-appearance:none; appearance: none; }

 

//二、winphone下,使用伪成分改换表单成分暗中认可外观

//一.禁止使用select暗许箭头,::-ms-expand修改表单控件下拉箭头,设置隐藏并接纳背景图片来修饰

select::-ms-expand { display:none; }

 

//二.禁止使用radio和checkbox默许样式,::-ms-check修改表单复选框或单选框暗中认可Logo,设置隐藏并运用背景图片来修饰

input[type=radio]::-ms-check,

input[type=checkbox]::-ms-check { display:none; }

 

//3.禁止使用pc端表单输入框暗中认可清除开关,::-ms-clear修改清除按键,设置隐藏并使用背景图片来修饰

input[type=text]::-ms-clear,

input[type=tel]::-ms-clear,

input[type=number]::-ms-clear { display:none; }

移步端字体单位font-size选用px照旧rem

// 如需适配多种平移装备,建议选择rem。以下为参考值:

html { font-size: 62.5%; }   //10*16 = 62.5%

//设置1二px字体
  那里注目的在于rem前要加上对应的px值,化解不帮忙rem的浏览器的包容难点,做到优雅降级

body { font-size:12px; font-size:1.2rem; }     

超实用的CSS样式

//去掉webkit的滚动条——display: none;

//别的参数

::-webkit-scrollba //滚动条全部部分

::-webkit-scrollbar-thumb   //滚动条内的小方块

::-webkit-scrollbar-track   //滚动条轨道

::-webkit-scrollbar-button  //滚动条轨道两端按钮

::-webkit-scrollbar-track-piece  //滚动条个中有个别,内置轨道

::-webkit-scrollbar-corner       //边角,八个滚动条交汇处

::-webkit-resizer
           //八个滚动条的交界处上用以通过拖动调控成分大小的小控件

 

// 禁止长按链接与图片弹出美食做法

a,img { -webkit-touch-callout: none }    

 

// 禁止ios和android用户选普通话字

html,body {-webkit-user-select:none; user-select: none; }

 

// 改换输入框placeholder的颜色值

::-webkit-input-placeholder { /* WebKit browsers */

color: #999; }

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */

color: #999; }

::-moz-placeholder { /* Mozilla Firefox 19+ */

color: #999; }

:-ms-input-placeholder { /* Internet Explorer 10+ */

color: #999; }

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

 

// android上去掉语音输入开关

input::-webkit-input-speech-button {display: none}

 

// 阻止windows Phone的暗中认可触摸事件

/*证实:winphone下暗许触摸事件事件选择e.preventDefault是于事无补的,可由此体制来禁止使用,如:*/

html { -ms-touch-action:none; } //禁止winphone私下认可触摸事件

 

  • 收回input在ios下,输入的时候英文首字母的暗许大写

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

  • 手提式有线电电话机录像和上传图片

//IOS有摄像、录制、选拔本地图片作用,部分Android唯有选择地面图片效率。Winphone不协助

<input type=”file” accept=”images/*” />

<input type=”file” accept=”video/*” />

显示屏旋转的轩然大波和体制

//JS处理

function orientInit(){

    var orientChk = document.documentElement.clientWidth >
document.documentElement.clientHeight?’landscape’:’portrait’;

    if(orientChk ==’lapdscape’){

        //那里是横屏下需求实行的轩然大波

    }else{

        //那里是竖屏下须求施行的轩然大波

    }

}

 

orientInit();

window.addEventListener(‘onorientationchange’ in
window?’orientationchange’:’resize’, function(){

    setTimeout(orientInit, 100);

},false)    

 

//CSS处理

//竖屏时样式

@media all and (orientation:portrait){   }

//横屏时样式

@media all and (orientation:landscape){   }

audio成分和video成分在ios和andriod中不能自动播放

//音频,写法一

<audio src=”music/bg.mp三” autoplay loop
controls>你的浏览器还不支持啊</audio>

 

//音频,写法二

<audio controls=”controls”>

    <source src=”music/bg.ogg” type=”audio/ogg”></source>

    <source src=”music/bg.mp3″ type=”audio/mpeg”></source>

    优先播放音乐bg.ogg,不支持在广播bg.mp三

</audio>

 

//JS绑定自动播放(操作window时,播放音乐)

$(window).one(‘touchstart’, function(){

    music.play();

})

 

//微信下包容处理

document.addEventListener(“WeixinJSBridgeReady”, function () {

    music.play();

}, false);

 

//小结

//1.audio成分的autoplay属性在IOS及Android上无法使用,在PC端平常

//二.audio元素不曾安装controls时,在IOS及Android会攻克空间大小,而在PC端Chrome是不会占有任何空间

动力感应事件

// 运用HTML5的deviceMotion,调用重力影响事件

if(window.DeviceMotionEvent){

    document.addEventListener(‘devicemotion’, deviceMotionHandler,
false)

}   

 

var speed = 30;

var x = y = z = lastX = lastY = lastZ = 0;

function deviceMotionHandler(eventData){

    var acceleration = event.accelerationIncludingGravity;

    x = acceleration.x;

    y = acceleration.y;

    z = acceleration.z;

    if(Math.abs(x-lastX)>speed || Math.abs(y-lastY)>speed ||
Math.abs(z-lastZ)>speed ){

        //那里是忽悠后要实行的主意

        yaoAfter();

    }

    lastX = x;

    lastY = y;

    lastZ = z;

}

 

function yaoAfter(){

    //do something

}

 

//表达:说见案例摇壹摇效果中yao.js

微信浏览器用户调节字体大小后页面矬了,怎么阻止用户调控

//以下代码可使Android机页面不再受用户字体缩放强制改动大小,可是会有壹S左右延时,时期能够设想loading来拍卖

if (typeof(WeixinJSBridge) == “undefined”) {

    document.addEventListener(“WeixinJSBridgeReady”, function (e) {

        setTimeout(function(){

            WeixinJSBridge.invoke(‘setFontSizeCallback’, {
‘fontSize’:0}, function(res){

                alert(JSON.stringify(res));

            })

        }, 0)

    });

}else{  

    setTimeout(function(){

        WeixinJSBridge.invoke(‘setFontSizeCallback’, { ‘fontSize’:0},
function(res){

            alert(JSON.stringify(res));

        })

    }, 0)   

}

 

//IOS下可选择 -webkit-text-size-adjust禁止用户调整字体大小

body { -webkit-text-size-adjust:100%!important; }

 

//最棒的缓解方案:最佳使用rem或比重搭架子

从来的坑

//fixed定位

//一.ios下fixed成分轻便定位出错,软键盘弹出时,影响fixed成分定位

//2.android下fixed表现要比iOS更加好,软键盘弹出时,不会影响fixed成分定位

//3.ios4下不帮衬position:fixed

//化解方案:使用[Iscroll](

<div id=”wrapper”>

        <ul>

               <li></li>

               …..

        </ul>

</div>

<script src=”iscroll.js”></script>

<script>

    var myscroll;

    function loaded(){

        myscroll=new iScroll(“wrapper”);

    }

    window.addEventListener(“DOMContentLoaded”,loaded,false);

</script>

 

 

//position定位

//Android下弹出软键盘弹出时,影响absolute成分定位

//化解方案:

var ua = navigator.userAgent.indexOf(‘Android’);

if(ua>-1){

    $(‘.ipt’).on(‘focus’, function(){

        $(‘.css’).css({‘visibility’:’hidden’})

    }).on(‘blur’, function(){

        $(‘.css’).css({‘visibility’:’visible’})

    })

}

播音录像不全屏

<!–

壹.ios柒+帮忙自动播放

2.支持Airplay的设备(如:音箱、Apple TV)播放

x-webkit-airplay=”true”

3.播放摄像不全屏

webkit-playsinline=”true”

–>

<video x-webkit-airplay=”true” webkit-playsinline=”true”
preload=”auto” autoplay src=”;

JS判定设备

function deviceType(){

    var ua = navigator.userAgent;

    var agent = [“Android”, “iPhone”, “SymbianOS”, “Windows Phone”,
“iPad”, “iPod”];    

    for(var i=0; i<len,len = agent.length; i++){

        if(ua.indexOf(agent[i])>0){         

            break;

        }

    }

}

deviceType();

window.addEventListener(‘resize’, function(){

    deviceType();

})

JS决断微信浏览器

function isWeixin(){

    var ua = navigator.userAgent.toLowerCase();

    if(ua.match(/MicroMessenger/i)==’micromessenger’){

        return true;

    }else{

        return false;

    }

}

android 2.3 bug

//[email protected]
须求以0%方始百分百完毕,0%的百分号不能够去掉

//2.after和before伪类不可能利用动画animation

//三.border-radius不援助%单位,如要包容,能够给radius设置一下较大的值

//四.translate比例的写法和scale在联合签名会招致失效,例如:

-webkit-transform: translate(-50%,-50%) scale(-0.5, 1)

android 4.x bug

//一.三星(Samsung) Galaxy S肆中自带浏览器不扶助border-radius缩写

//二.同时安装border-radius和背景观的时候,背景象会溢出到圆角以外部分

//三.局地手提式有线电话机(如Samsung),a链接匡助鼠标:visited事件,也正是说链接待上访问后文字变为灰白

//4.android无法同时播放多音频audio

消除transition闪屏

.css {

    -webkit-transform-style: preserve-3d;

    -webkit-backface-visibility: hidden;

    -webkit-perspective: 1000;

}

展开硬件加速

//方今,像Chrome/Filefox/Safari/IE玖+以及新型版本Opera都帮忙硬件加快,当检验到某些DOM成分接纳了有些CSS规则时就会活动开启,从而缓解页面闪白,保险动画流畅。

.css {

    -webkit-transform: translate3d(0,0,0);

    -moz-transform: translate3d(0,0,0);

    -ms-transform: translate3d(0,0,0);

    transform: translate3d(0,0,0);

}

渲染优化

//一.禁用iframe(阻塞父文书档案onload事件)

//二.禁用gif图片实现loading效果(下跌CPU消耗,进步渲染品质)

//使用CSS三代码替代JS动画;

//开启GPU加速;

//使用base六15人编码图片(十分大图来说,大图不提议采纳)

    //
对于部分小Logo,能够采纳base六17人编码,以缩减网络请求。但不建议大图使用,相比较开销CPU。小Logo优势在于:

    //1.减少HTTP请求;

    //2.防止文件跨域;

    //3.修改及时生效;

 

Meta基础知识: H伍页面窗口自动调节到设备宽度,并禁止用户缩放页面
//一、HTML页面结构 meta…

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website