H5项目周围难题及注意事项,h五项目普遍难点

By admin in 4858美高梅 on 2019年4月19日

Meta基础知识:

  • H5页面窗口自动调控到装备宽度,并严令禁止用户缩放页面

//一、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宽度,为3个正整数,或字符串‘device-width’

// height
  设置viewport中度,1般设置了小幅度,会自动分析出中度,能够不要安装

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

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

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

// 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(注: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”>

 

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中度,1般安装了步长,会自动分析出惊人,能够毫无安装

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

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

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

// 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的浏览器,比如华为–>

<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伍项目周边难点及注意事项,h5项目周围难题

移动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” />

<!– ios七.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取值与页面定义的增进率一致
–>

<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,例如只须求适配一加和平板电脑等分辨率差距相比挺大的装置

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()2个提醒框,此时会触发该事件,这一个事件相比较少用

TouchEvent

  • touches:显示屏上具备手指的消息
  • targetTouches:手指在对象区域的指尖消息
  • changedTouches:近年来3遍触发该事件的指头消息
  • 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个商家内一个同事的享受:

2007年苹果发表首个款式iphone上IOS系统搭载的safari为了将适用于PC端上海高校显示屏的网页能比较好的体今后堂哥伦比亚大学端上,使用了双击缩放(double
tap to
zoom)的方案,比如您在小弟大上用浏览器张开三个PC上的网页,你大概在察看页面内容即便能够撑满整个荧屏,不过字体、图片都不大看不清,此时得以快速双击显示器上的某1部分,你就能看清该有的放大后的始末,再次双击后能回来原有状态。

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

缘由就出在浏览器必要什么样剖断飞速点击上,当用户在显示屏上单击某四个因素时候,例如跳转链接<a
href=”#”></a>,此处浏览器会先捕获该次单击,但浏览器无法调整用户是单独要点击链接或然要双击该有的区域进行缩放操作,所以,捕获第二遍单击后,浏览器会先Hold1段时间t,假设在t时间区间里用户未开始展览下1回点击,则浏览器会做单击跳转链接的拍卖,如若t时间里用户展开了第三回单击操作,则浏览器会禁止跳转,转而开始展览对该片段区域页面包车型地铁缩放操作。那么这几个时间区间t有微微呢?在IOS
safari下,大概为300微秒。那正是延迟的由来。产生的后果用户纯粹单击页面,页面需求过1段时间才响应,给用户慢体验认为,对于web开辟者来讲是,页面js捕获click事件的回调函数处理,必要300ms后才生效,也就直接导致影响此外事情逻辑的拍卖。

斩草除根方案:

  • fastclick可以消除在四弟大上点击事件的300ms延迟
  • zepto的touch模块,tap事件也是为了缓解在click的推移难点

触摸事件的响应顺序

缓解300ms延迟的标题,也得以通过绑定ontouchstart事件,加快对事件的响应

什么是Retina 显示器,带来了什么难题
retina:一种具备超高像素密度的液晶屏,同样大小的荧屏上展现的像素点由3个变为三个,如在同样水肿的显示屏上,苹果设备的retina显示器中,像素点二个变为多少个

在高清显示器中的位图被推广,图片会变得模糊,因而活动端的视觉稿平时会计统计筹为理念PC的贰倍

那正是说,前端的回复方案是:

安排稿切出来的图形长度宽度有限支撑为偶数,并行使backgroud-size把图纸收缩为原本的2/四

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

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

其它成分的取值为本来的50%,例如视觉稿40px的书体,使用样式的写法为20px

.css{font-size:20px}

参考《高清显示器原理及设计方案》

ios系统霜月素被触摸时爆发的半透明浅豆沙色遮罩怎么去掉

ios用户点击一个链接,会产出1个半透明藏蓝遮罩,
要是想要禁止使用,可设置-webkit-tap-highlight-color的阿尔法值为0,也等于属性值的最终一个人设置为0就足以去除半透明中灰遮罩

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

壹对android系统桐月素被点击时发生的边框怎么去掉

android用户点击贰个链接,会冒出1个边框恐怕半晶莹剔透墨浅紫蓝遮罩,
不一样生产商定义出来额效果分歧样,可安装-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有个副成效,正是输入法不再能够输入八个字符

除此以外,有个别机型去除不了,如Samsung2

对此按键类还有个章程,不使用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(winphone八)表单元素暗中同意外观怎么样重新恢复设置
剥夺 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 IE10)》

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

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

发短信,winphone系统无效

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

写邮件,可参照《移动web页面给用户发送邮件的格局》

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

效仿开关hover效果
移动端触摸开关的效应,可明示用户有些业务恰好产生,是贰个相比较好经验,不过运动装备中并不曾鼠标指针,使用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成分》

摇一摇效果
HTML5deviceMotion:封装了运动传感器数据的轩然大波,能够获得手机移动状态下的移动加快度等数码。

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

<!– 选用照片 –>

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

<!– 接纳录像 –>

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

运用计算:

ios 有录制、录制、选拔本地图片成效
部分android唯有选用本地图片功用
winphone不支持
input控件暗中同意外观丑陋
微信浏览器用户调节字体大小后页面矬了,怎么阻止用户调节
原因

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

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

/**

* 页面参与那段代码可使Android机器页面不再碰到用户字体缩放强制改造大小

* 可是会有1个一秒左右的推迟,时期能够设想通过loading显示

* 仅供参考

*/

(function(){

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

H5项目周围难题及注意事项,h五项目普遍难点。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,-1/2) scale(-0.5, 一)

android 4.x bug

  • Samsung Galaxy S四中自带浏览器不帮助border-radius缩写
  • 并且设置border-radius和背景象的时候,背景象会溢出到圆角以外部分
  • 1对有线电话(如三星(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成分定位
  • ios4下不协助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》

播音摄像不全屏

<!–

一.ios7+扶助自动播放

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差不离同样,会jquery基本会zepto~

最新版本现已更新到一.16

官网:

中文(非官网):

常利用的扩大模块:

浏览器检查测试:

tap事件:

iscroll.js

缓解页面不帮助弹性滚动,不援救fixed引起的标题~

福衢寿车下拉刷新,滑屏,缩放等成效~

最新版本现已更新到5.0

官网:

underscore.js

小编没用过,不过据悉好用,推荐给我们~

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

摩登版本已经更新到一.八.二

官网:

滑屏框架

切合上下滑屏、左右滑屏等滑屏切换页面包车型大巴效应

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:子成分水平居中

4858美高梅,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下的子成分必须为块级元素,非块级成分在android二.3机械下flex失效

参考:

flexyboxes

“老”的Flexbox和“新”的Flexbox

跨浏览器的Flexbox

FastClick

破除在活动浏览器上触发click事件与贰个物理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五-1008陆”>打电话给:075五-100八6</a>

 

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

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

 

// 三、写邮件

//注:在丰硕这么些作用时,首个效益以”?”开端,前面包车型客车以”&”伊始

//一.平凡邮件

<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>

//四.含有多个收件人、抄送、密件抄赠送外人,用分号(;)隔断三个邮件人的地址

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

//五.包涵大旨,用?subject=

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

//陆.包涵内容,用?body=;依有趣的事情节包罗文本,使用%0A给文本换行

<a
href=”mailto:86313997八@qq.com?body=邮件焦点内容%0A腾讯诚信%0A期待您的过来”>点击自个儿发邮件</a>

//7.剧情涵盖链接,含http(s)://等的文件自动转接为链接

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

//8.内容涵盖图表(PC不帮衬)

<a href=”mailto:86313997八@qq.com?body=<img src=’images/1.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/1.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 8

MSPointerDown——当手指触碰显示屏时候爆发。不管当前有微微只手指

MSPointerMove——当手指在显示器上海好笑剧团动时总是触发。平日大家再滑屏页面,会调用css的html{-ms-touch-action:
none;}能够阻挡暗中同意意况的发生:阻止页面滚动

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

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

注解:移动装备上的web网页是有300ms延迟的,玩玩会变成按键点击延迟甚至是点击失效。

 

以下是历史由来,来源1个商厦内三个同事的分享:

200柒年苹果发表首个款式iphone上IOS系统搭载的safari为了将适用于PC端上海高校显示器的网页能相比较好的显得在姐夫大端上,使用了双击缩放(double
tap to
zoom)的方案,比如您在大哥大上用浏览器展开一个PC上的网页,你恐怕在见到页面内容纵然可以撑满整个荧屏,但是字体、图片都相当的小看不清,此时得以神速双击显示屏上的某1局部,你就能看清该部分放大后的内容,再一次双击后能回去原来状态。

 

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

 

缘由就出在浏览器必要怎么样推断神速点击上,当用户在显示屏上单击某一个要素时候,例如跳转链接<a
href=”#”></a>,此处浏览器会先捕获该次单击,但浏览器不可能说了算用户是仅仅要点击链接也许要双击该部分区域开始展览缩放操作,所以,捕获第四回单击后,浏览器会先Hold一段时间t,如若在t时间区间里用户未开始展览下一遍点击,则浏览器会做单击跳转链接的处理,借使t时间里用户举行了第叁遍单击操作,则浏览器会禁止跳转,转而进展对该片段区域页面包车型地铁缩放操作。那么那么些日子区间t某些许啊?在IOS
safari下,大概为300阿秒。那正是延迟的由来。形成的结局用户纯粹单击页面,页面须求过1段时间才响应,给用户慢体验认为,对于web开采者来说是,页面js捕获click事件的回调函数处理,须要300ms后才生效,也就直接导致影响其余作业逻辑的处理。

 

//消除方案:

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

zepto的touch模块,tap事件也是为着消除在click的延迟难点

Rentina显示屏原理及设计方案

注脚:retina屏是一种具有超高像素密度的液晶屏,同样大小的荧屏上展现的像素点由二个变为多少个,如在同等燥咳的显示器上,苹果设备的retina显示器中,像素点3个变为伍个。

在高清显示屏中的位图被放大,图片会变得模糊,由此活动端的视觉稿常常会规划为古板PC的2倍。

那么,前端的答应方案是:设计稿切出来的图片长宽保证为偶数,并采纳backgroud-size把图纸收缩为原本的2/④

 

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

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

//其余成分的取值为原本的50%,例如视觉稿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的阿尔法值为0去除一些机器自带的效果;

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

//特殊表明:有些机型去除不了,如华为二。对于开关类还有个章程,不使用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; }

 

//三.禁止使用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定位

//1.ios下fixed成分轻易定位出错,软键盘弹出时,影响fixed元素定位

//2.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’})

    })

}

播音录制不全屏

<!–

一.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%的百分号无法去掉

//二.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事件)

//2.禁用gif图片达成loading效果(降低CPU消耗,提高渲染质量)

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

//开启GPU加速;

//使用base陆10人编码图片(十分大图来讲,大图不建议使用)

    //
对于1些小Logo,能够应用base610人编码,以减掉互连网请求。但不提议大图使用,相比费用CPU。小Logo优势在于:

    //1.减少HTTP请求;

    //二.制止文件跨域;

    //3.修改及时生效;

 

普遍难题:

  • 活动端怎么样定义字体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伍-十086″>打电话给:075伍-10086</a>

 

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

<a href=”sms:1008陆”>发短信给: 10086</a>

 

// 三、写邮件

//注:在抬高那一个效应时,第三个职能以”?”初始,前面包车型大巴以”&”开首

//1.见惯司空邮件

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

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

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

//三.随后抄送地址后,写上&bcc=,可增添密件抄送地址(Android存在兼容难题)

<a
href=”mailto:86313997八@qq.com?cc=zhangqian040陆@yeah.net&bcc=384柒仟玖六@qq.com”>点击本人发邮件</a>

//肆.分包多个收件人、抄送、密件抄送给别人,用分号(;)隔离多少个邮件人的地址

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

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

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

//6.包涵内容,用?body=;仍遗闻情节涵盖文本,使用%0A给文本换行

<a
href=”mailto:86313997八@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>

//玖.1体化示例

<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延迟的,玩玩会导致开关点击延迟甚至是点击失效。

 

以下是历史原因,来源1个同盟社内三个同事的享受:

2007年苹果宣布第一个款式iphone上IOS系统搭载的safari为了将适用于PC端上海南大学学显示屏的网页能相比好的来得在手机端上,使用了双击缩放(double
tap to
zoom)的方案,比如你在手机上用浏览器展开三个PC上的网页,你恐怕在收看页面内容尽管可以撑满整个显示器,但是字体、图片都不大看不清,此时能够火速双击荧屏上的某1局地,你就能看清该有的放大后的始末,再一次双击后能回去原来状态。

 

双击缩放是指用手指在荧屏上高速点击四次,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的推迟难点

Rentina显示器原理及设计方案

证实:retina屏是一种具有超高像素密度的液晶屏,一样大小的显示器上出示的像素点由二个变成三个,如在平等久痢的显示器上,苹果设备的retina显示屏中,像素点三个变成陆个。

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

那就是说,前端的答疑方案是:设计稿切出来的图片长度宽度保险为偶数,并选用backgroud-size把图纸减弱为原本的百分之五10

 

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

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

//别的成分的取值为本来的5/10,例如视觉稿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用户点击一个链接,会现出1个半透明橄榄棕遮罩,
固然想要禁止使用,可设置-webkit-tap-highlight-color的阿尔法值为0去除深翠绿半透明遮罩;

//android用户点击三个链接,会现出三个边框或许半晶莹剔透莲灰遮罩,
分裂生产商定义出来额效果不雷同,可设置-webkit-tap-highlight-color的阿尔法值为0去除部分机器自带的功效;

//winphone系统,点击标签发生的影青半透明背景,能由此设置<meta
name=”msapplication-tap-highlight” content=”no”>去掉;

//特殊表达:某个机型去除不了,如One plus二。对于按键类还有个办法,不使用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”>

鼓吹表单成分

//一、使用appearance改变webkit浏览器的暗许外观

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

 

//贰、winphone下,使用伪成分改换表单成分私下认可外观

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

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

 

//2.禁止使用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.mp3

</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

}

 

//表明:说见案例摇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定位

//1.ios下fixed元素轻易定位出错,软键盘弹出时,影响fixed成分定位

//2.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

//一.@-webkit-keyframes 供给以0%发端百分百结束,0%的百分号无法去掉

//二.after和before伪类不能够选取动画animation

//3.border-radius不匡助%单位,如要包容,能够给radius设置一下十分的大的值

//4.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加速;

//使用base6玖位编码图片(一点都不小图来讲,大图不提出接纳)

    //
对于某些小Logo,能够选取base陆拾个人编码,以调减网络请求。但不建议大图使用,相比较费用CPU。小图标优势在于:

    //1.减少HTTP请求;

    //2.幸免文件跨域;

    //三.修改及时生效;

 

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    允许用户最大缩放比例,为二个数字,能够带小数

// 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的浏览器,比如小米–>

<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>

 

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

<a href=”sms:100捌陆”>发短信给: 拾086</a>

 

// 三、写邮件

//注:在加上这几个职能时,第四个功用以”?”开头,前边的以”&”开头

//一.普通邮件

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

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

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

//3.随即抄送地址后,写上&bcc=,可增多密件抄送地址(Android存在包容难题)

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

//4.暗含三个收件人、抄送、密件抄赠给外人,用分号(;)隔开分离五个邮件人的地方

<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>

//柒.剧情涵盖链接,含http(s)://等的文本自动转载为链接

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

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

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

//玖.全部示例

<a
href=”mailto:[email protected];[email protected][email protected]&[email protected]&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)的方案,比如你在手提式有线话机上用浏览器展开3个PC上的网页,你或然在察看页面内容即便能够撑满整个显示器,不过字体、图片都不大看不清,此时得以急速双击显示器上的某一片段,你就能看清该片段放大后的始末,再一次双击后能再次来到原来状态。

 

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

 

由来就出在浏览器必要怎么样判断快速点击上,当用户在显示屏上单击某1个因素时候,例如跳转链接<a
href=”#”></a>,此处浏览器会先捕获该次单击,但浏览器不能决定用户是仅仅要点击链接可能要双击该有的区域开始展览缩放操作,所以,捕获第2次单击后,浏览器会先Hold壹段时间t,假设在t时间区间里用户未开始展览下3回点击,则浏览器会做单击跳转链接的拍卖,如若t时间里用户张开了第三回单击操作,则浏览器会禁止跳转,转而开始展览对该有的区域页面包车型地铁缩放操作。那么这么些小时区间t有稍许吗?在IOS
safari下,大概为300飞秒。那正是延迟的由来。产生的后果用户纯粹单击页面,页面须求过1段时间才响应,给用户慢体验以为,对于web开采者来讲是,页面js捕获click事件的回调函数处理,供给300ms后才生效,也就直接导致影响别的业务逻辑的处理。

 

//化解方案:

fastclick能够解决在手提式有线电话机上点击事件的300ms延迟

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

Rentina显示器原理及设计方案

表达:retina屏是一种具备超高像素密度的液晶屏,同样大小的显示屏上海展览中心示的像素点由二个产生多少个,如在1如既往水肿的显示器上,苹果设备的retina显示器中,像素点三个产生6个。

在高清荧屏中的位图被推广,图片会变得模糊,因而活动端的视觉稿日常会规划为观念PC的2倍。

那么,前端的答问方案是:设计稿切出来的图纸长度宽度有限支撑为偶数,并使用backgroud-size把图片收缩为本来的3/陆

 

//例如图片宽高为: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用户点击四个链接,会现出3个半晶莹剔透锌钡白遮罩,
假诺想要禁止使用,可安装-webkit-tap-highlight-color的阿尔法值为0去除暗绿半透明遮罩;

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

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

//特殊表达:某些机型去除不了,如华为贰。对于按键类还有个艺术,不使用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”>

说大话表单成分

//壹、使用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.mp3

</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

}

 

//表达:说见案例摇壹摇效果中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定位

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

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

//叁.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’})

    })

}

播音录像不全屏

<!–

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

//[email protected]
须要以0%伊始百分百告终,0%的百分号不能够去掉

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

//3.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和背景象的时候,背景象会溢出到圆角以外部分

//3.部根据地手提式有线电话机(如三星(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事件)

//2.禁用gif图片达成loading效果(下降CPU消耗,提高渲染品质)

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

//开启GPU加速;

//使用base陆十人编码图片(非常的大图来说,大图不建议采纳)

    //
对于有个别小图标,可以选择base6四个人编码,以压缩网络请求。但不提议大图使用,相比较开销CPU。小图标优势在于:

    //1.减少HTTP请求;

    //2.制止文件跨域;

    //三.修改及时生效;

 

Meta基础知识: H五页面窗口自动调控到装备宽度,并严令禁止用户缩放页面
//一、HTML页面结构 meta…

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有