邯郸网站建设效果好,房产中介 网站开发,百度账号登录入口,最新仿uehtml网站源码H5项目常见问题及注意事项 补充#xff1a; https://github.com/aligay/fastclick/blob/master/lib/fastclick.js Meta基础知识#xff1a; H5页面窗口自动调整到设备宽度#xff0c;并禁止用户缩放页面//一、HTML页面结构
meta nameviewport content…H5项目常见问题及注意事项 补充 https://github.com/aligay/fastclick/blob/master/lib/fastclick.js Meta基础知识 H5页面窗口自动调整到设备宽度并禁止用户缩放页面//一、HTML页面结构
meta nameviewport contentwidthdevice-width,initial-scale1.0,minimum-scale1.0,maximum-scale1.0,user-scalableno /
// width 设置viewport宽度为一个正整数或字符串‘device-width’
// height 设置viewport高度一般设置了宽度会自动解析出高度可以不用设置
// 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(version2.3){document.write(meta nameviewport contentwidth640, minimum-scale phoneScale, maximum-scale phoneScale, target-densitydpidevice-dpi);}else{document.write(meta nameviewport contentwidth640, target-densitydpidevice-dpi);}
} else {document.write(meta nameviewport contentwidth640, user-scalableno, target-densitydpidevice-dpi);
} 空白页基本meta标签 !-- 设置缩放 --
meta nameviewport contentwidthdevice-width, initial-scale1, user-scalableno, minimal-ui /
!-- 可隐藏地址栏仅针对IOS的Safari注IOS7.0版本以后safari上已看不到效果 --
meta nameapple-mobile-web-app-capable contentyes /
!-- 仅针对IOS的Safari顶端状态条的样式可选default/black/black-translucent --
meta nameapple-mobile-web-app-status-bar-style contentblack /
!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 --
meta nameformat-detectioncontenttelephoneno, emailno / 其他meta标签 !-- 启用360浏览器的极速模式(webkit) --
meta namerenderer contentwebkit
!-- 避免IE使用兼容模式 --
meta http-equivX-UA-Compatible contentIEedge
!-- 针对手持设备优化主要是针对一些老的不识别viewport的浏览器比如黑莓 --
meta nameHandheldFriendly contenttrue
!-- 微软的老式浏览器 --
meta nameMobileOptimized content320
!-- uc强制竖屏 --
meta namescreen-orientation contentportrait
!-- QQ强制竖屏 --
meta namex5-orientation contentportrait
!-- UC强制全屏 --
meta namefull-screen contentyes
!-- QQ强制全屏 --
meta namex5-fullscreen contenttrue
!-- UC应用模式 --
meta namebrowsermode contentapplication
!-- QQ应用模式 --
meta namex5-page-mode contentapp
!-- windows phone 点击无高光 --
meta namemsapplication-tap-highlight contentno 常见问题 移动端如何定义字体font-family --------------------------------------中文字体的英文名称宋体 SimSun黑体 SimHei微信雅黑 Microsoft Yahei微软正黑体 Microsoft JhengHei新宋体 NSimSun新细明体 MingLiU细明体 MingLiU标楷体 DFKai-SB仿宋 FangSong楷体 KaiTi仿宋_GB2312 FangSong_GB2312楷体_GB2312 KaiTi_GB2312 说明中文字体多数使用宋体、雅黑英文用Helveticabody { font-family: Microsoft Yahei,SimSun,Helvetica; } 打电话发短信写邮件怎么实现 // 一、打电话
a hreftel:0755-10086打电话给:0755-10086/a// 二、发短信winphone系统无效
a hrefsms:10086发短信给: 10086/a// 三、写邮件
//注在添加这些功能时第一个功能以?开头后面的以开头
//1.普通邮件
a hrefmailto:863139978qq.com点击我发邮件/a
//2.收件地址后添加?cc开头可添加抄送地址Android存在兼容问题
a hrefmailto:863139978qq.com?cczhangqian0406yeah.net点击我发邮件/a
//3.跟着抄送地址后写上bcc,可添加密件抄送地址Android存在兼容问题
a hrefmailto:863139978qq.com?cczhangqian0406yeah.netbcc384900096qq.com点击我发邮件/a
//4.包含多个收件人、抄送、密件抄送人用分号(;)隔开多个邮件人的地址
a hrefmailto:863139978qq.com;384900096qq.com点击我发邮件/a
//5.包含主题用?subject
a hrefmailto:863139978qq.com?subject邮件主题点击我发邮件/a
//6.包含内容用?body;如内容包含文本使用%0A给文本换行
a hrefmailto:863139978qq.com?body邮件主题内容%0A腾讯诚信%0A期待您的到来点击我发邮件/a
//7.内容包含链接含http(s)://等的文本自动转化为链接
a hrefmailto:863139978qq.com?bodyhttp://www.baidu.com点击我发邮件/a
//8.内容包含图片PC不支持
a hrefmailto:863139978qq.com?bodyimg srcimages/1.jpg /点击我发邮件/a
//9.完整示例
a hrefmailto:863139978qq.com;384900096qq.com?cczhangqian0406yeah.netbcc993233461qq.comsubject[邮件主题]body腾讯诚邀您参与%0A%0Ahttp://www.baidu.com%0A%0Aimg srcimages/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延迟的玩玩会造成按钮点击延迟甚至是点击失效。以下是历史原因来源一个公司内一个同事的分享
2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上使用了双击缩放(double tap to zoom)的方案比如你在手机上用浏览器打开一个PC上的网页你可能在看到页面内容虽然可以撑满整个屏幕但是字体、图片都很小看不清此时可以快速双击屏幕上的某一部分你就能看清该部分放大后的内容再次双击后能回到原始状态。双击缩放是指用手指在屏幕上快速点击两次iOS 自带的 Safari 浏览器会将网页缩放至原始比例。原因就出在浏览器需要如何判断快速点击上当用户在屏幕上单击某一个元素时候例如跳转链接a href#/a此处浏览器会先捕获该次单击但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作所以捕获第一次单击后浏览器会先Hold一段时间t如果在t时间区间里用户未进行下一次点击则浏览器会做单击跳转链接的处理如果t时间里用户进行了第二次单击操作则浏览器会禁止跳转转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢在IOS safari下大概为300毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面页面需要过一段时间才响应给用户慢体验感觉对于web开发者来说是页面js捕获click事件的回调函数处理需要300ms后才生效也就间接导致影响其他业务逻辑的处理。//解决方案
fastclick可以解决在手机上点击事件的300ms延迟
zepto的touch模块tap事件也是为了解决在click的延迟问题 Rentina显示屏原理及设计方案 说明retina屏是一种具备超高像素密度的液晶屏同样大小的屏幕上显示的像素点由1个变为多个如在同样带下的屏幕上苹果设备的retina显示屏中像素点1个变为4个。
在高清显示屏中的位图被放大图片会变得模糊因此移动端的视觉稿通常会设计为传统PC的2倍。
那么前端的应对方案是设计稿切出来的图片长宽保证为偶数并使用backgroud-size把图片缩小为原来的1/2//例如图片宽高为200px*200px那么写法如下
.css{width:100px;height:100px;background-size:100px 100px;}
//其它元素的取值为原来的1/2例如视觉稿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用户点击一个链接会出现一个半透明灰色遮罩, 如果想要禁用可设置-webkit-tap-highlight-color的alpha值为0去除灰色半透明遮罩
//android用户点击一个链接会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果
//winphone系统,点击标签产生的灰色半透明背景能通过设置meta namemsapplication-tap-highlight contentno去掉
//特殊说明有些机型去除不了如小米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 namemsapplication-tap-highlight contentno 美化表单元素 //一、使用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[typeradio]::-ms-check,
input[typecheckbox]::-ms-check { display:none; }//3.禁用pc端表单输入框默认清除按钮::-ms-clear修改清除按钮设置隐藏并使用背景图片来修饰
input[typetext]::-ms-clear,
input[typetel]::-ms-clear,
input[typenumber]::-ms-clear { display:none; } 移动端字体单位font-size选择px还是rem // 如需适配多种移动设备建议使用rem。以下为参考值
html { font-size: 62.5%; } //10*16 62.5%
//设置12px字体 这里注意在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 autocapitalizeoff autocorrectoff / 手机拍照和上传图片//IOS有拍照、录像、选取本地图片功能部分Android只有选择本地图片功能。Winphone不支持
input typefile acceptimages/* /
input typefile acceptvideo/* / 屏幕旋转的事件和样式 //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 srcmusic/bg.mp3 autoplay loop controls你的浏览器还不支持哦/audio//音频写法二
audio controlscontrols source srcmusic/bg.ogg typeaudio/ogg/sourcesource srcmusic/bg.mp3 typeaudio/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端正常
//2.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机页面不再受用户字体缩放强制改变大小但是会有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元素定位
//3.ios4下不支持position:fixed
//解决方案使用[Iscroll](http://cubiq.org/iscroll-5)如
div idwrapperulli/li...../ul
/div
script srciscroll.js/script
scriptvar myscroll;function loaded(){myscrollnew 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-airplaytrue
3.播放视频不全屏
webkit-playsinlinetrue
--
video x-webkit-airplaytrue webkit-playsinlinetrue preloadauto autoplay srchttp:///video JS判断设备 function deviceType(){var ua navigator.userAgent;var agent [Android, iPhone, SymbianOS, Windows Phone, iPad, iPod]; for(var i0; ilen,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%开始100%结束0%的百分号不能去掉
//2.after和before伪类无法使用动画animation
//3.border-radius不支持%单位如要兼容可以给radius设置一下较大的值
//4.translate百分比的写法和scale在一起会导致失效例如
-webkit-transform: translate(-50%,-50%) scale(-0.5, 1) android 4.x bug //1.三星 Galaxy S4中自带浏览器不支持border-radius缩写
//2.同时设置border-radius和背景色的时候背景色会溢出到圆角以外部分
//3.部分手机(如三星)a链接支持鼠标:visited事件也就是说链接访问后文字变为紫色
//4.android无法同时播放多音频audio 消除transition闪屏 .css {-webkit-transform-style: preserve-3d;-webkit-backface-visibility: hidden;-webkit-perspective: 1000;
} 开启硬件加速 //目前像Chrome/Filefox/Safari/IE9以及最新版本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事件
//2.禁止使用gif图片实现loading效果降低CPU消耗提升渲染性能
//使用CSS3代码代替JS动画
//开启GPU加速
//使用base64位编码图片(不小图而言大图不建议使用)// 对于一些小图标可以使用base64位编码以减少网络请求。但不建议大图使用比较耗费CPU。小图标优势在于//1.减少HTTP请求//2.避免文件跨域//3.修改及时生效转载于:https://www.cnblogs.com/sybboy/p/8881027.html
