加入收藏 | 设为首页 | 会员中心 | 我要投稿 晋中站长网 （https://www.0354zz.com/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 站长资讯 > 评论 > 正文

移动端H5页面开发坑点指南

发布时间：2019-10-25 00:52:44 所属栏目：评论 来源：_Dreamslv
导读：前言 在平时的H5移动端开发时，我们难免会遇到各种各样的坑点，这篇文章就带着大家来看看怎么解决，文章较长，建议收藏方便以后查阅! 前方高能! canvas在retina屏模糊 只需要将画笔根据像素比缩放即可 run(canvasEl){ constcanvas=canvasEl; constctx=canv

添加完这段代码后在IOS上会有问题,这时发现input框无法正在输入内容了;造成这个原因是-webkit-user-select:none;这个属性,解决方法就是在css文件中同时设置一下input的属性,如下:

  1. input {       
  2.      -webkit-user-select:auto; //webkit浏览器     
  3. } 

html5碰到上下拉动滚动条时卡顿/慢怎么解决

首先你可能会给页面的html和body增加了height: 100%, 然后就可能造成IOS上页面滑动的卡顿问题。

解决方案是： 1.让html和body固定100%(或者100vh)， 2.然后再在内部放一个height:100%的div，设置overflow-y: auto;和-webkit-overflow-scrolling: touch;

  1. .scroll-box { 
  2.   /* 模态框之类的div不能放在这个容器中,否则关闭模态框有时候关闭不了 */ 
  3.   height: 100%; 
  4.   overflow-y: auto; 
  5.   -webkit-overflow-scrolling: touch; 
  6.   overflow-scrolling: touch; 
  7. } 

点击元素产生背景或边框怎么去掉

  1. a,button,input,textarea{ 
  2. -webkit-tap-highlight-color: rgba(0,0,0,0); 
  3. -webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有个副作用,就是输入法不再能够输入多个字符 
  4. } 
  5. 或 
  6. a,button,input,textarea{ 
  7. -webkit-tap-highlight-color: rgba(0,0,0,0); 
  8. } 

浏览器后退不刷新

这种情况是以前遇到的,这里也说下;主要会发生在webview里多一点,当点击后退时页面以缓存形式出现,而不是刷新后的,很多情况下这不是你预期的效果,解决方法是用js:

  1. window.onpageshow = function(evt){ 
  2.   if(evt.persisted){  
  3.      document.body.style.display ="none"; 
  4.      location.reload(); 
  5.   } 
  6. }; 

onpageshow每次页面加载都会触发,无论是从缓存中加载还是正常加载,这是他和onload的区别;persisted判断页面是否从缓存中读出

input的placeholder文本位置偏上的情况

input的placeholder会出现文本位置偏上的情况:PC端设置line-height等于height能够对齐,而移动端仍然是偏上,解决方案时是设置css line-height:normal;

transition清除闪屏

  1. -webkit-transform-style: preserve-3d; //设置内嵌的元素在 3D 空间如何呈现：保留3D 
  2. -webkit-backface-visibility:hidden; //设置进行转换的元素的背面在面对用户时是否可见：隐藏 
  3. -webkit-perspective: 1000; 

解决active伪类失效

  1. <body ontouchstart></body> 

顶部状态栏背景色

  1. apple-mobile-web-app-capable是设置Web应用是否以全屏模式运行;语法: 
  2. <meta name="apple-mobile-web-app-capable" content="yes"> //content设置为yesWeb应用会以全屏模式 
  3. <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 

说明:除非你先使用apple-mobile-web-app-capable指定全屏模式,否则这个meta标签不会起任何作用;如果content设置为default,则状态栏正常显示;如果设置为blank,则状态栏会有一个黑色的背景;如果设置为blank-translucent,则状态栏显示为黑色半透明;如果设置为default或blank,则页面显示在状态栏的下方,即状态栏占据上方部分;页面占据下方部分，二者没有遮挡对方或被遮挡;如果设置为blank-translucent,则页面会充满屏幕,其中页面顶部会被状态栏遮盖住(会覆盖页面20px高度，而iphone4和itouch4的Retina屏幕为40px);默认值是default。

ios专区

IOS中对input键盘事件keyup/keydown/keypress等支持不好的问题

经查发现,IOS的输入法(不管是第三方还是自带)能检测到英文或数字的keyup,但检测不到中文的keyup,在输入中文后需要点回退键才开始搜索;解决办法是用html5的oninput事件去代替keyup,通过如下代码达到类似keyup的效果;

  1. 修改了input:checkbox或input:radio元素的选择中状态,checked属性发生变化
  2. 修改了input:text或textarea元素的值,value属性发生变化
  3. 修改了select元素的选中项,selectedIndex属性发生变化统一使用input监听
  1. <input type="text" id="testInput"> 
  2. <script type="text/javascript"> 
  3.     document.getElementById('testInput').addEventListener('input', function(e){ 
  4.         var value = e.target.value; //e.target指向事件执行时鼠标所点击区域的那个元素;初学者会认为当前事件所绑定的元素就是鼠标所点击的那个元素,这时就要看看时间绑定的元素内部有没有子元素,如果有e.target指向这个子元素,如果没有e.target和this都指向事件所绑定的元素 
  5.     }); 
  6. </script>  

IOS键盘字母输入,默认首字母大写的解决方案

设置如下属性

  1. <input autocapitalize="off" autocorrect="off" /> 

//input的三个属性autocomplete:默认为on,代表是否让浏览器自动记录输入的值,可以在input中加入autocomplete="off"来关闭记录,保密输入内容;autocapitalize:自动大小写;autocorrect:纠错

关于iOS与OS X端字体的优化(横竖屏会出现字体加粗不一致等)问题

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
相关内容
    推荐文章
    站长推荐
    热点阅读

      【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

      建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

      Copygight © 2008-2022 https://www.0354zz.com/ All Rights Reserved. 晋中站长网