h5问题总结

摘要:
代码执行没问题,但是下拉的时候页面因为要从新加载,页面会闪烁一下,视觉体验差,性能方面因为要从新解析dom树,所以会影响性能。下拉时清除原先的dom,在从新渲染,既解决了页面闪烁的问题,性能上也有提升,页面执行回流,减少了解析dom,css,生成渲染树3个步骤。

一、下拉刷新上拉加载

主要依赖一款插件mescroll.js http://www.mescroll.com/

简单好用。以前同事的用法是初始化执行执行上拉会调,页数从0开始,下拉重新加载当前地址走初始化的上拉会调。代码执行没问题,但是下拉的时候页面因为要从新加载,页面会闪烁一下,视觉体验差,性能方面因为要从新解析dom树,所以会影响性能。

改进方案:关闭上拉初始化加载,下拉开启初始化加载,下拉回调中执行请求数据函数,把页数重0开始(注意:手动设置num为0,因为没上拉一次num会++,所以下拉刷新我们要初始化它, mescroll.options.up.page.num = 0),上拉配置中页数从1开始。下拉时清除原先的dom,在从新渲染,既解决了页面闪烁的问题,性能上也有提升,页面执行回流,减少了解析dom,css,生成渲染树3个步骤。

二、js加载.md文件

下载marked.min.js

getMarkdown(“xxx/xxx.md”)
functiongetMarkdown(markdown){
    var xhr = newXMLHttpRequest();
    xhr.open('get',markdown);
    xhr.send('');
    xhr.onload = function() {
        $("#content").html(marked(xhr.responseText));
    }
}

h5常见问题

1、动态设置scroll滑动到底部

$('.scroll').scrollTop($('.scroll')[0].scrollHeight)

2、移动端img标签src为空,会显示一个未加载成功的图标,可以移除src属性。

3、从APP url获取的数据要进行解密decodeURL()。

4、适配是建议结构布局用vw/vh,具体元素单位用px(看情况)。

5、移动端点击a标签会有背景框,解决:

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

6、火狐浏览器缓存文本框内容,解决:

<input type="tel" placeholder="" autocomplete="off"> //添加autocomplete="off" 即可

7、https页面中引入http资源,解决,页面的head中加入:

<meta http-equiv="Content-Security-Policy"content="upgrade-insecure-requests"> //自动将http的不安全请求升级为https

8、禁止复制、选中文本,解决:

p {-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;user-select:none;
}

9、给不同屏幕大小的手机设置特殊样式:

@media only screen  and (min-device-width : 320px)  and (max-device-width : 375px){}

10、ios 设置input 按钮样式会被默认样式覆盖,解决:

input,textarea {border:0;-webkit-appearance:none;
}

11、input 的placeholder属性会使文本位置偏上,解决:

line-height: (和input框的高度一样高)---pc端解决方法
line-height:normal ---移动端解决方法

12、input type=number之后,pc端出现上下箭头,解决:

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {-webkit-appearance:none !important;margin:0;
}

13、实现android和ios系统手机打开相机并可选择相册功能

<input   type="file" name="cover" accept="image/*" capture="camera" multiple/>

$(function() {
    //获取浏览器的userAgent,并转化为小写
    var ua =navigator.userAgent.toLowerCase();
    //判断是否是苹果手机,是则是true
    var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
    if(isIos) {
        $("input:file").removeAttr("capture");
    };
})

14、关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等,解决:

p{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;      
}

15、移动端点击300ms延迟,解决:移动端用tap事件来取代click事件。

兼容问题参考了其他文章地址:https://www.jianshu.com/p/c55d4ef43859

--------------------------结束

免责声明:文章转载自《h5问题总结》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Windows10 ntoskrnl.exe占用大量的磁盘空间(100%)Photoshop:通过图片理解通道原理下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

ActiveMQ消息的消费原理

消费端消费消息:   在 初识ActiveMQ 中我提到过,两种方法可以接收消息,一种是使用同步阻塞的ActiveMQMessageConsumer#receive方法。另一种是使用消息监听器MessageListener。这里需要注意的是,在同一个session下,这两者不能同时工作,也就是说不能针对不同消息采用不同的接收方式。否则会抛出异常。至于为什么...

AI佳作解读系列(一)——深度学习模型训练痛点及解决方法

1 模型训练基本步骤 进入了AI领域,学习了手写字识别等几个demo后,就会发现深度学习模型训练是十分关键和有挑战性的。选定了网络结构后,深度学习训练过程基本大同小异,一般分为如下几个步骤 定义算法公式,也就是神经网络的前向算法。我们一般使用现成的网络,如inceptionV4,mobilenet等。 定义loss,选择优化器,来让loss最小 对数据进...

移动端兼容性问题解决方案

1. IOS移动端click事件300ms的延迟响应 移动设备上的web网页是有300ms延迟的,往往会造成按钮点击延迟甚至是点击失效。这是由于区分单击事件和双击屏幕缩放的历史原因造成的, 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上,使用了双击缩放(double tap to z...

mysql通过mysql_install_db初始化数据目录时使用--user选项的作用是什么?

需求描述:   mysql数据库通过mysql_install_db初始化数据目录时,使用了--user选项,这里记录下该参数的作用 参数解释: 1.--user的作用:就是以哪个操作系统用户来执行mysqld进程(使用哪个用户来运行mysql server) 2.比如,指定了--user=mysql之后,那么通过mysqld创建的文件或者目录都是被mys...

IIS各个版本中你需要知道的那些事儿

一、写在前面 目前市面上所用的IIS版本估计都是>=6.0的.所以我们主要以下面三个版本进行讲解 服务器版本   IIS默认版本 server2003 6.0 server2008 7.0 server2012 8.0 二、IIS6的请求过程   由图可知,所有的请求会被服务器中的http.sys组件监听到,它会根据IIS中的...

前端er们如何最快开发h5移动端页面?

声明在前:本文原创,一字一字手打,转载还请消息M我一下,求伸手党手下留情。   一直以来对web移动端的东西做的比较多,总是在做确从来没总结过,于是想对移动端的框架选择到相关技巧,进行一个归纳。首先声明,我也是只萌新,不是大神,肯定会有写得不够严谨的地方,欢迎指正~互相交流,若有忍不了的地方,求轻喷,轻喷,喷.....   以下为正文:   互联网已经进入...