详讲H5、WebApp项目中常见的坑以及注意事项
首先我们中会有一些常用的meta标签,如下:
<!--防止手机中网页放大和缩小-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
备注:width 设置viewport宽度,为一个正整数,或字符串‘device-width’
height 设置viewport高度,一般设置了宽度,会自动解析出高度,可以不用设置
initial-scale 默认缩放比例,为一个数字,可以带小数
minimum-scale 允许用户最小缩放比例,为一个数字,可以带小数
maximum-scale 允许用户最大缩放比例,为一个数字,可以带小数
user-scalable 是否允许手动缩放 <!--让浏览器使用webkit来解析-->
<meta name="renderer" content="webkit|ie-comp|ie-stand"><!--禁止ios设备将数字作为拨号连接,邮箱自动发送,点击地图跳转-->
<meta name="format-detection" content="telephone=no,email=no,adress=no"><!--强制显示全屏-->
<meta name="full-screen" content="yes"><!--开启对webapp的支持设置Web应用是否以全屏模式运行-->
<meta name="apple-mobile-web-app-capable" content="yes">
备注:如果content设置为yes,Web应用会以全屏模式运行,反之,则不会。content的默认值是no,表示正常显示。
你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示<!--webapp应用下状态条颜色,默认值为黑色-->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
备注:除非你先使用apple-mobile-web-app-capable指定全屏模式,否则这个meta标签不会起任何作用。
如果content设置为default,则状态栏正常显示。如果设置为blank,则状态栏会有一个黑色的背景。
如果设置为blank-translucent,则状态栏显示为黑色半透明。如果设置为default或blank,则页面显示在状态栏的下方,
即状态栏占据上方部分,页面占据下方部分,二者没有遮挡对方或被遮挡。如果设置为blank-translucent,则页面会充满屏幕,
其中页面顶部会被状态栏遮盖住(会覆盖页面20px高度,而iphone4和itouch4的Retina屏幕为40px)。默认值是default。<!--禁止浏览器从缓存中访问页面-->
<meta http-equiv="pragma" content="no-cache"><!--禁止自动识别电话号码-->
<meta name="format-detection" content="telephone=no"/><!--禁止自动识别邮箱-->
<meta content="email=no" name="format-detection"/><!--iphone中safari私有meta标签,允许全屏模式浏览,隐藏浏览器导航栏-->
<meta name="apple-mobile-web-app-capable" content="yes"/>
其次还有一些特殊情况需要用到的meta标签。可依照项目情况而定
<!-- 启用浏览器的极速模式(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">
一般移动端,有人喜欢用百分比,有人喜欢用rem,有人喜欢用em,我个人比较喜欢百分比和rem(主要我懒的算= =),下面我说我个人用的rem。我是为了完全自适应,多以通常会拿js先控制,然后再用rem,代码如下:
//动态设置页面的像素比,达到一比一还原设计稿
var iScale=;
iScale=iScale/window.devicePixelRatio;
document.write('<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no,' +
'initial-scale='+iScale+',maximum-scale='+iScale+',minimum-scale='+iScale+'">');
var iWidth=document.documentElement.clientWidth;
document.getElementsByTagName("html")[].style.fontSize = iWidth/+"px";
这样我在项目里,比如720的设计图纸,h2字体大小36px,宽度400px,那么我就会这样写:
h2{
font-size: /rem;
width: /rem;
}
以此类推,这样就会达到无论在什么设备上,都是1:1还原了设计图纸。当然我也会在一些section设置width的时候,用百分比。这些依照情况而定。
前段时间,一个朋友说有个bug一直不知道怎么解决,我一看,是浮动造成的,在iPhone6P、UC浏览器以及QQ浏览器上,底部固定定位的导航,右侧头部会有留白部分,好像掉下去一样。个人有个建议,在手机上,涉及到底部固定定位的导航,尽量使用弹性盒子flex布局,而不是使用浮动,当然,我个人很喜好弹性盒子,没办法,太懒。。。
项目中,我们往往会遇到一些判断浏览器的,判断设备的,如下:
//JS判断设备
function deviceType(){
var ua = navigator.userAgent;
var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
for(var i=; i<len,len = agent.length; i++){
if(ua.indexOf(agent[i])>){
break;
}
}
}
//JS判断微信浏览器
function isWeixin(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=='micromessenger'){
return true;
}else{
return false;
}
}
deviceType();
window.addEventListener('resize', function(){
deviceType();
})
这是一般时候用的,当然还有另外一种:
var browser = {
versions: function () {
var u = navigator.userAgent, app = navigator.appVersion;
return { //移动终端浏览器版本信息
trident: u.indexOf('Trident') > -, //IE内核
presto: u.indexOf('Presto') > -, //opera内核
webKit: u.indexOf('AppleWebKit') > -, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -, //火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -, //android终端或uc浏览器
iPhone: u.indexOf('iPhone') > -, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -, //是否iPad
webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}if (browser.versions.mobile) {//判断是否是移动设备打开。browser代码在下面
var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
if (ua.match(/MicroMessenger/i) == "micromessenger") {
//在微信中打开
}
if (ua.match(/WeiBo/i) == "weibo") {
//在新浪微博客户端打开
}
if (ua.match(/QQ/i) == "qq") {
//在QQ空间打开
}
if (browser.versions.ios) {
//是否在IOS浏览器打开
}
if(browser.versions.android){
//是否在安卓浏览器打开
}
} else {
//否则就是PC浏览器打开
}
下面是整理的一些常见的坑和解决办法:
1:微信浏览器用户调整字体大小后页面矬了,怎么阻止用户调整如下:
//以下代码可使Android机页面不再受用户字体缩放强制改变大小,但是会有1S左右延时,期间可以考虑loading来处理
if (typeof(WeixinJSBridge) == "undefined") {
document.addEventListener("WeixinJSBridgeReady", function (e) {
setTimeout(function(){
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':}, function(res){
alert(JSON.stringify(res));
})
}, )
});
}else{
setTimeout(function(){
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':}, function(res){
alert(JSON.stringify(res));
})
}, )
}//IOS下可使用 -webkit-text-size-adjust禁止用户调整字体大小
body { -webkit-text-size-adjust:%!important; }//最好的解决方案:使用rem或百分比布局
2:移动端 HTML5 input date 不支持 placeholder 问题,可以设置如下即可解决
<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" id="date">
3: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 src="music/bg.mp3" type="audio/mpeg">
<!--优先播放音乐bg.ogg,不支持在播放bg.mp3-->
</audio>
<script>
//JS绑定自动播放(操作window时,播放音乐)
$(window).one('touchstart', function(){
music.play();
})
//微信下兼容处理
document.addEventListener("WeixinJSBridgeReady", function () {
music.play();
}, false);
//备注
//1.audio元素的autoplay属性在IOS及Android上无法使用,在PC端正常
//2.audio元素没有设置controls时,在IOS及Android会占据空间大小,而在PC端Chrome是不会占据任何空间
</script>
也可用如下方法:先通过用户 touchstart 触碰,触发播放并暂停(音频开始加载,后面用 JS 再操作就没问题了)
<script>
document.addEventListener('touchstart', function () {
document.getElementsByTagName('audio')[].play();
document.getElementsByTagName('audio')[].pause();
});
</script>
4:取消input在ios下,输入的时候英文首字母的默认大写
<input autocapitalize="off" autocorrect="off" />
5:android上去掉语音输入按钮
input::-webkit-input-speech-button {display: none}
6:关于 iOS 端字体的优化(横竖屏会出现字体加粗不一致等)
-webkit-text-size-adjust: %;
-ms-text-size-adjust: %;
text-size-adjust: %;
html,body {-webkit-user-select:none; user-select: none; }
8:H5GPS定位,我这里有个将GPS坐标转换成GCJ-02墨卡托坐标的js代码,可以精确的定位到具体地理位置。有捣鼓定位的可以试试。链接地址:http://download.csdn.NET/detail/zhaohaixin0418/9736523 具体定位问题,改天有时间给大家整理一个出来
9:某些Android手机圆角失效,代码如下:
{background-clip: padding-box;}
10:关于 iOS 系统中,中文输入法输入英文时,字母之间可能会出现一个六分之一空格
this.value = this.value.replace(/\u2006/g, '');
11:打电话发短信写邮件怎么实现
<!--一、打电话-->
<a href="tel:0755-10086">打电话给:0755-10086</a>
<!--二、发短信,winphone系统无效-->
<a href="sms:10086">发短信给: 10086</a>
<!--三、写邮件
注:在添加这些功能时,第一个功能以"?"开头,后面的以"&"开头1.普通邮件-->
<a href="mailto:979976770@qq.com">点击我发邮件</a>
<!--2.收件地址后添加?cc=开头,可添加抄送地址(Android存在兼容问题)-->
<a href="mailto:979976770@qq.com?cc=alone_haixin@163.com">点击我发邮件</a>
<!--3.跟着抄送地址后,写上&bcc=,可添加密件抄送地址(Android存在兼容问题)-->
<a href="mailto:979976770@qq.com?cc=alone_haixin@163.com&bcc=723661@qq.com">点击我发邮件</a>
<!--4.包含多个收件人、抄送、密件抄送人,用分号(;)隔开多个邮件人的地址-->
<a href="mailto:979976770@qq.com;723661@qq.com">点击我发邮件</a>
<!--5.包含主题,用?subject=-->
<a href="mailto:979976770@qq.com?subject=邮件主题">点击我发邮件</a>
<!--6.包含内容,用?body=;如内容包含文本,使用%0A给文本换行-->
<a href="mailto:979976770@qq.com?body=邮件主题内容%0A剧情再美%0A终究是戏">点击我发邮件</a>
<!--7.内容包含链接,含http(s)://等的文本自动转化为链接-->
<a href="mailto:979976770@qq.com?body=http://www.baidu.com">点击我发邮件</a>
<!--8.内容包含图片(PC不支持)-->
<a href="mailto:979976770@qq.com?body=<img src='images/1.jpg' />">点击我发邮件</a>
<!--9.完整示例-->
<a href="mailto:979976770@qq.com;723661@qq.com?cc=alone_haixin@163.com&bcc=723661@qq.com&subject=
[邮件主题]&body=剧情再美终究是戏%0A%0Ahttp://www.baidu.com%0A%0A<img src='images/1.jpg' />">点击我发邮件</a>
12:手机拍照和上传图片
<!--IOS有拍照、录像、选取本地图片功能,部分Android只有选择本地图片功能。Winphone不支持-->
<input type="file" accept="images/*" />
<input type="file" accept="video/*" />
13:美化表单元素的一些css:
/*一、使用appearance改变webkit浏览器的默认外观*/
input,select { -webkit-appearance:none; appearance: none; }
/*二、winphone下,使用伪元素改变表单元素默认外观1.禁用select默认箭头,::-ms-expand修改表单控件下拉箭头,设置隐藏并使用背景图片来修饰*/
select::-ms-expand { display:none; }
/*2.禁用radio和checkbox默认样式,::-ms-check修改表单复选框或单选框默认图标,设置隐藏并使用背景图片来修饰*/
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; }
另外给大家说一个重感力事件:
// 运用HTML5的deviceMotion,调用重力感应事件
if(window.DeviceMotionEvent){
document.addEventListener('devicemotion', deviceMotionHandler, false)
}
var speed = ;
var x = y = z = lastX = lastY = lastZ = ;
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
}
首先我们中会有一些常用的meta标签,如下:
<!--防止手机中网页放大和缩小-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
备注:width 设置viewport宽度,为一个正整数,或字符串‘device-width’
height 设置viewport高度,一般设置了宽度,会自动解析出高度,可以不用设置
initial-scale 默认缩放比例,为一个数字,可以带小数
minimum-scale 允许用户最小缩放比例,为一个数字,可以带小数
maximum-scale 允许用户最大缩放比例,为一个数字,可以带小数
user-scalable 是否允许手动缩放 <!--让浏览器使用webkit来解析-->
<meta name="renderer" content="webkit|ie-comp|ie-stand"><!--禁止ios设备将数字作为拨号连接,邮箱自动发送,点击地图跳转-->
<meta name="format-detection" content="telephone=no,email=no,adress=no"><!--强制显示全屏-->
<meta name="full-screen" content="yes"><!--开启对webapp的支持设置Web应用是否以全屏模式运行-->
<meta name="apple-mobile-web-app-capable" content="yes">
备注:如果content设置为yes,Web应用会以全屏模式运行,反之,则不会。content的默认值是no,表示正常显示。
你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示<!--webapp应用下状态条颜色,默认值为黑色-->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
备注:除非你先使用apple-mobile-web-app-capable指定全屏模式,否则这个meta标签不会起任何作用。
如果content设置为default,则状态栏正常显示。如果设置为blank,则状态栏会有一个黑色的背景。
如果设置为blank-translucent,则状态栏显示为黑色半透明。如果设置为default或blank,则页面显示在状态栏的下方,
即状态栏占据上方部分,页面占据下方部分,二者没有遮挡对方或被遮挡。如果设置为blank-translucent,则页面会充满屏幕,
其中页面顶部会被状态栏遮盖住(会覆盖页面20px高度,而iphone4和itouch4的Retina屏幕为40px)。默认值是default。<!--禁止浏览器从缓存中访问页面-->
<meta http-equiv="pragma" content="no-cache"><!--禁止自动识别电话号码-->
<meta name="format-detection" content="telephone=no"/><!--禁止自动识别邮箱-->
<meta content="email=no" name="format-detection"/><!--iphone中safari私有meta标签,允许全屏模式浏览,隐藏浏览器导航栏-->
<meta name="apple-mobile-web-app-capable" content="yes"/>
其次还有一些特殊情况需要用到的meta标签。可依照项目情况而定
<!-- 启用浏览器的极速模式(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">
一般移动端,有人喜欢用百分比,有人喜欢用rem,有人喜欢用em,我个人比较喜欢百分比和rem(主要我懒的算= =),下面我说我个人用的rem。我是为了完全自适应,多以通常会拿js先控制,然后再用rem,代码如下:
//动态设置页面的像素比,达到一比一还原设计稿
var iScale=;
iScale=iScale/window.devicePixelRatio;
document.write('<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no,' +
'initial-scale='+iScale+',maximum-scale='+iScale+',minimum-scale='+iScale+'">');
var iWidth=document.documentElement.clientWidth;
document.getElementsByTagName("html")[].style.fontSize = iWidth/+"px";
这样我在项目里,比如720的设计图纸,h2字体大小36px,宽度400px,那么我就会这样写:
h2{
font-size: /rem;
width: /rem;
}
以此类推,这样就会达到无论在什么设备上,都是1:1还原了设计图纸。当然我也会在一些section设置width的时候,用百分比。这些依照情况而定。
前段时间,一个朋友说有个bug一直不知道怎么解决,我一看,是浮动造成的,在iPhone6P、UC浏览器以及QQ浏览器上,底部固定定位的导航,右侧头部会有留白部分,好像掉下去一样。个人有个建议,在手机上,涉及到底部固定定位的导航,尽量使用弹性盒子flex布局,而不是使用浮动,当然,我个人很喜好弹性盒子,没办法,太懒。。。
项目中,我们往往会遇到一些判断浏览器的,判断设备的,如下:
//JS判断设备
function deviceType(){
var ua = navigator.userAgent;
var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
for(var i=; i<len,len = agent.length; i++){
if(ua.indexOf(agent[i])>){
break;
}
}
}
//JS判断微信浏览器
function isWeixin(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=='micromessenger'){
return true;
}else{
return false;
}
}
deviceType();
window.addEventListener('resize', function(){
deviceType();
})
这是一般时候用的,当然还有另外一种:
var browser = {
versions: function () {
var u = navigator.userAgent, app = navigator.appVersion;
return { //移动终端浏览器版本信息
trident: u.indexOf('Trident') > -, //IE内核
presto: u.indexOf('Presto') > -, //opera内核
webKit: u.indexOf('AppleWebKit') > -, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -, //火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -, //android终端或uc浏览器
iPhone: u.indexOf('iPhone') > -, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -, //是否iPad
webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}if (browser.versions.mobile) {//判断是否是移动设备打开。browser代码在下面
var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
if (ua.match(/MicroMessenger/i) == "micromessenger") {
//在微信中打开
}
if (ua.match(/WeiBo/i) == "weibo") {
//在新浪微博客户端打开
}
if (ua.match(/QQ/i) == "qq") {
//在QQ空间打开
}
if (browser.versions.ios) {
//是否在IOS浏览器打开
}
if(browser.versions.android){
//是否在安卓浏览器打开
}
} else {
//否则就是PC浏览器打开
}
下面是整理的一些常见的坑和解决办法:
1:微信浏览器用户调整字体大小后页面矬了,怎么阻止用户调整如下:
//以下代码可使Android机页面不再受用户字体缩放强制改变大小,但是会有1S左右延时,期间可以考虑loading来处理
if (typeof(WeixinJSBridge) == "undefined") {
document.addEventListener("WeixinJSBridgeReady", function (e) {
setTimeout(function(){
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':}, function(res){
alert(JSON.stringify(res));
})
}, )
});
}else{
setTimeout(function(){
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':}, function(res){
alert(JSON.stringify(res));
})
}, )
}//IOS下可使用 -webkit-text-size-adjust禁止用户调整字体大小
body { -webkit-text-size-adjust:%!important; }//最好的解决方案:使用rem或百分比布局
2:移动端 HTML5 input date 不支持 placeholder 问题,可以设置如下即可解决
<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" id="date">
3: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 src="music/bg.mp3" type="audio/mpeg">
<!--优先播放音乐bg.ogg,不支持在播放bg.mp3-->
</audio>
<script>
//JS绑定自动播放(操作window时,播放音乐)
$(window).one('touchstart', function(){
music.play();
})
//微信下兼容处理
document.addEventListener("WeixinJSBridgeReady", function () {
music.play();
}, false);
//备注
//1.audio元素的autoplay属性在IOS及Android上无法使用,在PC端正常
//2.audio元素没有设置controls时,在IOS及Android会占据空间大小,而在PC端Chrome是不会占据任何空间
</script>
也可用如下方法:先通过用户 touchstart 触碰,触发播放并暂停(音频开始加载,后面用 JS 再操作就没问题了)
<script>
document.addEventListener('touchstart', function () {
document.getElementsByTagName('audio')[].play();
document.getElementsByTagName('audio')[].pause();
});
</script>
4:取消input在ios下,输入的时候英文首字母的默认大写
<input autocapitalize="off" autocorrect="off" />
5:android上去掉语音输入按钮
input::-webkit-input-speech-button {display: none}
6:关于 iOS 端字体的优化(横竖屏会出现字体加粗不一致等)
-webkit-text-size-adjust: %;
-ms-text-size-adjust: %;
text-size-adjust: %;
html,body {-webkit-user-select:none; user-select: none; }
8:H5GPS定位,我这里有个将GPS坐标转换成GCJ-02墨卡托坐标的js代码,可以精确的定位到具体地理位置。有捣鼓定位的可以试试。链接地址:http://download.csdn.NET/detail/zhaohaixin0418/9736523 具体定位问题,改天有时间给大家整理一个出来
9:某些Android手机圆角失效,代码如下:
{background-clip: padding-box;}
10:关于 iOS 系统中,中文输入法输入英文时,字母之间可能会出现一个六分之一空格
this.value = this.value.replace(/\u2006/g, '');
11:打电话发短信写邮件怎么实现
<!--一、打电话-->
<a href="tel:0755-10086">打电话给:0755-10086</a>
<!--二、发短信,winphone系统无效-->
<a href="sms:10086">发短信给: 10086</a>
<!--三、写邮件
注:在添加这些功能时,第一个功能以"?"开头,后面的以"&"开头1.普通邮件-->
<a href="mailto:979976770@qq.com">点击我发邮件</a>
<!--2.收件地址后添加?cc=开头,可添加抄送地址(Android存在兼容问题)-->
<a href="mailto:979976770@qq.com?cc=alone_haixin@163.com">点击我发邮件</a>
<!--3.跟着抄送地址后,写上&bcc=,可添加密件抄送地址(Android存在兼容问题)-->
<a href="mailto:979976770@qq.com?cc=alone_haixin@163.com&bcc=723661@qq.com">点击我发邮件</a>
<!--4.包含多个收件人、抄送、密件抄送人,用分号(;)隔开多个邮件人的地址-->
<a href="mailto:979976770@qq.com;723661@qq.com">点击我发邮件</a>
<!--5.包含主题,用?subject=-->
<a href="mailto:979976770@qq.com?subject=邮件主题">点击我发邮件</a>
<!--6.包含内容,用?body=;如内容包含文本,使用%0A给文本换行-->
<a href="mailto:979976770@qq.com?body=邮件主题内容%0A剧情再美%0A终究是戏">点击我发邮件</a>
<!--7.内容包含链接,含http(s)://等的文本自动转化为链接-->
<a href="mailto:979976770@qq.com?body=http://www.baidu.com">点击我发邮件</a>
<!--8.内容包含图片(PC不支持)-->
<a href="mailto:979976770@qq.com?body=<img src='images/1.jpg' />">点击我发邮件</a>
<!--9.完整示例-->
<a href="mailto:979976770@qq.com;723661@qq.com?cc=alone_haixin@163.com&bcc=723661@qq.com&subject=
[邮件主题]&body=剧情再美终究是戏%0A%0Ahttp://www.baidu.com%0A%0A<img src='images/1.jpg' />">点击我发邮件</a>
12:手机拍照和上传图片
<!--IOS有拍照、录像、选取本地图片功能,部分Android只有选择本地图片功能。Winphone不支持-->
<input type="file" accept="images/*" />
<input type="file" accept="video/*" />
13:美化表单元素的一些css:
/*一、使用appearance改变webkit浏览器的默认外观*/
input,select { -webkit-appearance:none; appearance: none; }
/*二、winphone下,使用伪元素改变表单元素默认外观1.禁用select默认箭头,::-ms-expand修改表单控件下拉箭头,设置隐藏并使用背景图片来修饰*/
select::-ms-expand { display:none; }
/*2.禁用radio和checkbox默认样式,::-ms-check修改表单复选框或单选框默认图标,设置隐藏并使用背景图片来修饰*/
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; }
另外给大家说一个重感力事件:
// 运用HTML5的deviceMotion,调用重力感应事件
if(window.DeviceMotionEvent){
document.addEventListener('devicemotion', deviceMotionHandler, false)
}
var speed = ;
var x = y = z = lastX = lastY = lastZ = ;
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
}
详讲H5、WebApp项目中常见的坑以及注意事项的更多相关文章
- [ionic开源项目教程] - 第5讲 如何在项目中使用全局配置
第5讲 如何在项目中使用全局配置? Q:ionic开发,说纯粹一点,用的就是html+css+js,那么无疑跟web开发的方式是类似的.在这里给大家分享一个小技巧,如何在项目中使用全局配置? A:我的 ...
- iOS项目中常见的文件
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- Spring Boot 项目中常见注解
@Autowired 自动导入依赖的 Bean.byType方式.把配置好的 Bean拿来用,完成属性.方法的组装,它可以对类成员变量.方法及构造函数进行标注,完成自动装配的工作 import org ...
- java项目中常见的异常及处理
Java开发中常见异常及处理方法 1.JAVA异常 异常指不期而至的各种状况,如:文件找不到.网络连接失败.非法参数等.异常是一个事件,它发生在程序运行期间,干扰了正常的指令流程.Java通 过API ...
- Android中常见的坑有哪些?
对于安卓开发入门级程序猿而言,由于不熟悉代码.工具等等,掉进一些坑中是难免的,今天小编在网上看到一位大神总结的Android开发中比较常见的坑及其原因和解决办法,赶脚还不错,分享出来,给大家提个醒. ...
- iview在项目中遇到的坑
1.下拉框选中某一项搜索发现总是搜不到,最后发现是选中后选中值后边莫名多了很长的空格,原因很简单,在代码中opction闭合标签和主体没有在一行. 2.iview+vue项目中,用百分比或者displ ...
- Idea项目中常见错误及笔记(Old)
1.Idea基础设置: File-->settings--> 1>修改字体:Font 2>修改编码格式:File Encodings(全部UTF-8,右下方复选框勾中--防止程 ...
- Docker跑项目中常见的中间件
声明: 本章只作为记录 前端时间跑项目,发现每次都需要启动大量的中间件.在Windows 上启动特别麻烦 就想着写篇文章总结一下,把所有的 中间件全放服务器上启动 ,下次 直接复制黏贴命令就好了. 例 ...
- C#项目中常见的目录和文件
本文迁移自Panda666原博客,原发布时间:2021年4月17日. Bin 目录 bin是英文binary的缩写, 字面意思是二进制,意指用来存放编译后的结果.C#/VB编译器编译后的程序二进制文件 ...
随机推荐
- C# 自定义特性Attribute
一.特性Attribute和注释有什么区别 特性Attribute A:就是一个类,直接继承/间接继承Attribute B:特性可以在后期反射中处理,特性本身是没有什么*用的 C:特性会影响编译和运 ...
- es6解构赋值的几个用法
1.解构赋值可以轻松获取对象或者数组中的数据 var jsonData = { data: "111", data2: ["test","test2& ...
- 19-3-15Python中闭包,迭代器,递归
函数名的使用 函数名可以当作值赋值给变量 函数名可以当作元素放到容器里 闭包 一个嵌套函数 在嵌套函数内的函数使用外部(非全局的变量) 满足以上两条就是闭包 python中闭包,会进行内存驻留,普通函 ...
- [笔记][SQL] 连接join
在学习菜鸟教程里的MySQL教程时,对左右连接的结果有点不解. 其中有如下两个表: runoob_tbl: +-----------+--------------+---------------+-- ...
- Mysql-表的基本操作
一 存储引擎介绍 二 表介绍 三 创建表 四 查看表结构 五 数据类型 六 表完整性约束 七 修改表ALTER TABLE 八 复制表 九 删除表 一 .存储引擎介绍 存储引擎即表类型,mysql根据 ...
- php 二位数组排序
$member_ship_level 是一个二维数组 $res = array_column($member_ship_level,'integral'); array_multisort($res, ...
- Hadoop(12)-MapReduce框架原理-Hadoop序列化和源码追踪
1.什么是序列化 2.为什么要序列化 3.为什么不用Java的序列化 4.自定义bean对象实现序列化接口(Writable) 在企业开发中往往常用的基本序列化类型不能满足所有需求,比如在Hadoop ...
- 【转】ruby rake执行rspec
RSpec 是Ruby的一个行为驱动开发(BDD)工具,当前的版本是 2.10.根据其入门文档,安装好之后,可以使用 rspec 命令来运行“测试”.但在某些情况下,如果参数较多,使用该命令并不方便: ...
- 20155330 实验三 敏捷开发与XP实践
20155330 实验三 敏捷开发与XP实践 实验内容 XP基础 XP核心实践 相关工具 实验步骤 (一)敏捷开发与XP 软件工程是把系统的.有序的.可量化的方法应用到软件的开发.运营和维护上的过程. ...
- 20145226夏艺华 《Java程序设计》实验报告二
实验二 Java面向对象程序设计 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设计模式 实验步骤 (一)单元测试 ...