H5开发中的问题总结
最近公司做了一个出行日记的项目,里面的页面十多页,天天加班,做到吐血。总体来说,写页面的时候虽然是十多个页面,其实难度还是在每个页面的特效上。公司是易到用车,出行日记的页面在APP里有生成入口,有兴趣的同学可以去看看。
其实在写页面的过程中,并没有太多项目,可以直接按照设计图给的比例来进行开发,因为我们引用了一个缩放的js,然后分屏使用的是fullpage,因此可以不去考虑尺寸的问题了。页面里面用了大量的css3,主要是用来做一些特效,移动端对css3的属性兼容性基本无差,主要的兼容问题还在android和IOS的渲染模式。
比如说首页有个圆形的用户头像,一开始的实现方法是直接给img,width,height,border,border-radius,这样写在IOS中是没问题的,效果如同我们UED给的设计图
但是在android中就不行了,外面的边框仍然是圆的,但是里面的图片却是一个矩形。之后改成了在img外面套一个div,然后把width,height,border,border-radius给了外面的这个父容器,然后里面的头像图片样式改成height:100%;width:100%;border-radius: 50%,android和IOS就都乖乖好了,但是为什么在android中会出现这个问题到现在我也还没明白==、
2.去掉电话号码的默认样式
h5开发中,如果页面中包含电话号码,电话号码会被自动赋予样式,颜色变成蓝色还是紫色什么的。。。这个时候在head里面加一个
<meta name="format-detection" content="telephone=no"> <!--自动检测在网页中可能出现的电话号码-->
就药到病除了撒~
3.判断当前为微信环境
通过userAgent来判断,使用了jQuery
<script>
$(function(){
var ua = navigator.userAgent.toLowerCase();
var u = navigator.userAgent;
var matchmicro = ua.match('micromessenger');//如果符合返回micromessenger,如果不符合则返回null
var matchandroid = u.indexOf('Android') > -1;//判断终端为android
var matchios = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);//判断终端为ios
if(matchandroid || matchios ){
//function(){}
}else if( matchmicro[0] == 'micromessenger' ){//判断终端为微信
//function() {}
}else {
return false;
} });
</script>
4.判断屏幕当前是否为竖屏,横屏提醒旋转
function orientationChange() {
//当页面的宽大于高时提示
if(screen.width > screen.height) {
alert("为保证最佳品质的呈现,请保持竖屏浏览哦~");
}
//下方是不同旋转角度,可不用
/*switch (window.orientation) {
case 0:
alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case -90:
alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case 90:
alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case 180:
alert("风景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
}
;*/
}
// 添加事件监听
addEventListener('load', function(){
orientationChange();
window.onorientationchange = orientationChange;
});
由于页面在横屏下显示效果有些欠缺,故有此需求;但实际上通过在head中设置meta标签
<meta name="screen-orientation" content="portrait" />
可以达到强制竖屏,无法旋转屏幕的效果
5.css3中的calc
这个属性也是在看鹅厂的一个充费页面的时候看到的,一开始还以为是用了less,sass之类,一查才知道原来是css3的新属性,顿感自己知道的太少了,详细的介绍可以戳
http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html 我在这里不做扩展说明,简单来说可以进行运算,比如说我们想让一个元素宽度横霸全屏,但是两边需要有个间距居中,大部分时候我们要设置个margin、padding之类的,用这个就可以轻松达到了width:calc(100% - 70px);这只是一个小例子,更多的应用大家可以自己发现;另外使用的时候记得加浏览器厂商前缀,为了考虑兼容性可以设置一个width作为默认值。
6.电话可拨打,邮件可发送
<a href="tel:110">点击打电话</a>
<a href="mailto:110@qq.com">点击发邮件</a>
7.模拟a标签的hover效果,使用了zepto
<script>
$(function(){
var links = $('a');
for(var i = 0;i < links.length;i++) {
links[i].addEventListener('touchstart',function(){this.addClass('hover');},false);
links[i].addEventListener('touchend',function(){this.removeClass('hover');},false);
}
});
</script>
亲测有效,主要是用了touchstart事件,然后为元素添加class,比较灵活,用途很广泛,大家可以自己去挖掘
先写这么多,之后再补充~
H5开发中的问题总结的更多相关文章
- H5开发中的故障
本篇博文会不断的收录我在做H5页面时遇到的问题以及解决方案,当然有的问题,我也没有遇到好的解决方案,所以如果你有解决的办法,请务必不吝赐教! H5开发中的故障 微信APP返回按钮不刷新页面 ...
- H5开发中遇到的问题及解决办法
记不得什么时候进行H5开发的学习了,只知道是从2016年8月1日开始修复Bug,计划每天把学到的东西以及遇到问题时候的解决方案都记录下来,希望自己能够坚持下去,每天积累一点,希望有所进步吧. 1.Th ...
- h5开发中,利用微信或者QQ登陆以后获取用户头像在canvas画布显示问题
在实际开发上先的h5页面产品中,总会遇到各种坑,好多坑都是安卓和iPhone端兼容的问题(用电脑谷歌浏览器输入 chrome://inspect/#devices可以用手机USB调试,打开) eg: ...
- H5 开发中常见的小问题
1.解决 浏览器 返回按钮不刷新的问题 window.onpageshow = function(event) { if (event.persisted) { window.location.rel ...
- 移动端H5开发中的常见问题处理
1.问题之合成海报: 功能技术:http://html2canvas.hertzen.com 问题描述:合成模糊.合成区域内容错位,合成不完整,合成边缘白条等. 解决方案:如有页面布局正常合成错位的, ...
- 在移动端H5开发中(关于安卓端position:fixed和position:absolute;和虚拟键盘冲突的问题,以及解决方案)
一.在开发移动端webapp时,我们经常会遇到这样的问题,当我们需要在页面底部固定一个logo或者说明时,往往会采用position:fixed进行固定定位或者absolute定位到最底部 这是一个很 ...
- h5开发中所遇到的兼容性及所遇到的常见问题
1. 移动端border1px问题 <script> var viewport = document.querySelector("meta[name=viewport]&quo ...
- 【移动前端开发实践】从无到有(统计、请求、MVC、模块化)H5开发须知
前言 不知不觉来百度已有半年之久,这半年是996的半年,是孤军奋战的半年,是跌跌撞撞的半年,一个字:真的是累死人啦! 我所进入的团队相当于公司内部创业团队,人员基本全部是新招的,最初开发时连数据库都没 ...
- 带你使用h5开发移动端小游戏
带你使用h5开发移动端小游戏 在JY1.x版本中,你要做一个pc端的小游戏,会非常的简单,包括说,你要在低版本的浏览器IE8中,也不会出现明显的卡顿现象,你只需要关心游戏的逻辑就行了,比较适合逻辑较为 ...
随机推荐
- 关于学习JavaScript 的 高三编程 一些心得
面对JS 问题来说,很多的细节问题以及 弱类型转换的问题,往往会成为学习js 路上的一个阻碍. 那么问题来了,今天我看到的是 高三 里面的 基本概念的 语法问题. 直奔主题.(还是帖代码先) sw ...
- 移动端框架篇-控制子容器的滑屏框架-fullPage.js
控制子容器法 方法是只显示其中一个子元素,其它隐藏,滑屏时隐藏当前元素,并显示当前元素的下一个同辈元素~ 这里采用fullPage框架,库大小7.69K~ fullPage框架的页面样式无需自定义,已 ...
- 转】C#接口-显式接口和隐式接口的实现
[转]C#接口-显式接口和隐式接口的实现 C#中对于接口的实现方式有隐式接口和显式接口两种: 类和接口都能调用到,事实上这就是“隐式接口实现”. 那么“显示接口实现”是神马模样呢? interface ...
- ReactiveCocoa源码拆分解析(四)
(整个关于ReactiveCocoa的代码工程可以在https://github.com/qianhongqiang/QHQReactive下载) 上一章节简要的说明了如何实现的热信号.但是像那么写, ...
- 四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
- uoj228 基础数据结构练习题
趁别人题解没有放出来赶快写一篇 整数序列,操作 区间加 区间变成sqrt(下取整) 区间和 考虑一下对于每个区间里所有sqrt不同的段操作,那么可以在O(段数logn)一次的时间内完成sqrt操作.考 ...
- wampServer图标为橙色无法启动原因之一
前段时间,自己在本地做了一个WordPress的网站,利用wampserver配置的,后来突然无法启动了. 经过仔细查找发现是因为之前装了sql server,导致wampServer无法启动,那么怎 ...
- java23
1:多线程(理解) (1)多线程:一个应用程序有多条执行路径 进程:正在执行的应用程序 线程:进程的执行单元,执行路径 单线程:一个应用程序只有一条执行 ...
- XSS攻击及防御
XSS又称CSS,全称Cross SiteScript,跨站脚本攻击,是Web程序中常见的漏洞,XSS属于被动式且用于客户端的攻击方式,所以容易被忽略其危害性.其原理是攻击者向有XSS漏洞的网站中输入 ...
- Effective C++阅读笔记_条款2:尽量以const,enum,inline替换#define
1.#define缺点1 #define NUM 1.2 记号NUM可能没有进入记号表,在调试或者错误信息中,无法知道1.2的含义. 改善:通过const int NUM = 1.2; 2.#dein ...