h5问题总结

一、下拉刷新上拉加载

主要依赖一款插件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”)
function getMarkdown(markdown){
    var xhr = new XMLHttpRequest();
    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 class="js_upFile cover1" 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

 

 

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