一、下拉刷新上拉加载

主要依赖一款插件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

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

h5问题总结的更多相关文章

  1. 旺财速啃H5框架之Bootstrap(五)

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  2. 旺财速啃H5框架之Bootstrap(四)

    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...

  3. H5单页面手势滑屏切换原理

    H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...

  4. 快速构建H5单页面切换骨架

    在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...

  5. 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  6. 旺财速啃H5框架之Bootstrap(三)

    好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...

  7. H5程序员如何利用cordova开发跨平台应用

    什么是Cordova? Cordova以前也叫PhoneGap,它提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等.Cordova还 ...

  8. H5项目开发分享——用Canvas合成文字

    以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...

  9. 【腾讯Bugly干货分享】H5 视频直播那些事

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57a42ee6503dfcb22007ede8 Dev Club 是一个交流移动 ...

  10. H5嵌入原生开发小结----兼容安卓与ios的填坑之路

    一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的 ...

随机推荐

  1. Kubernetes日志系统新贵Loki-Stack

    Loki简介 Grafana Loki是可以组成功能齐全的日志记录堆栈的一组组件. 与其他日志记录系统不同,Loki是基于仅索引有关日志的元数据的想法而构建的:标签(就像Prometheus标签一样) ...

  2. 这次我让你彻底弄懂 RESTful

    微信搜 「yes的练级攻略」干货满满,不然来掐我,回复[123]一份20W字的算法刷题笔记等你来领.欢迎分享,转载请保留出处. 本文已收录至 https://github.com/yessimida/ ...

  3. Integer中的奇妙位运算

    Integer中的奇妙位运算 参考资料 https://segmentfault.com/a/1190000015763941 highestOneBit(int i) 函数的作用是获得传入参数的最高 ...

  4. 浅尝 Elastic Stack (二) Logstash

    一.安装与启动 Logstash 依赖 Java 8 或者 Java 11,需要先安装 JDK 1.1 下载 curl -L -O https://artifacts.elastic.co/downl ...

  5. `prometheus-net.DotNetRuntime` 获取 CLR 运行指标原理解析

    prometheus-net.DotNetRuntime 介绍 Intro 前面集成 Prometheus 的文章中简单提到过,prometheus-net.DotNetRuntime 可以获取到一些 ...

  6. go语言的指针类型

    一.指针与引用的相关概念 什么是指针? 指针,全称为指针变量,是用来存储内存地址的一种变量.程序中,一般通过指针来访问其指向的内存地址中的内容(数据). 什么是引用? 引用,是C++中提出来的一种新的 ...

  7. CAD插件

    CAD插件使用: 1.首先得有插件,插件解压,放那个盘都可以,只要自己觉得放得下,注:(每次打开CAD想要用插件都要的步骤)打开CAD---AP回车----找到插件所在文件夹-------Ctrl+A ...

  8. PyQt专题结题感言

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 今天写完PyQt专题显示部件的最后一篇文章,长长的 ...

  9. 第14.9节 Python中使用urllib.request+BeautifulSoup获取url访问的基本信息

    利用urllib.request读取url文档的内容并使用BeautifulSoup解析后,可以通过一些基本的BeautifulSoup对象输出html文档的基本信息.以博文<第14.6节 使用 ...

  10. bugku never give up

    打开网页,看到?id=1,很容易想到了爆破. 然后bp抓包爆破.(传说中的一秒爆破.) 看到了 1p.html . 直接访问 缓缓打出一个?(这是个锤子o,本来以为这里有flag,但是,这真的是论坛啊 ...