加入收藏 | 设为首页 | 会员中心 | 我要投稿 河北网 （https://www.hebeiwang.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 业界 > 正文

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

发布时间：2019-10-24 20:42:40 所属栏目：业界 来源：_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.hebeiwang.cn/ All Rights Reserved. 河北网