美文网首页webapp
webapp填坑记

webapp填坑记

作者: 别过经年 | 来源:发表于2017-05-10 15:34 被阅读84次

iPhone 软键盘将文档顶了上去

mobileTech
A useful tools or tips list for mobile web application developing
移动端fixed和input获取焦点软键盘弹出影响定位的问题

比如头部有个搜索框,进入当前页面获得焦点后,软键盘就会弹出来,这个时候,搜索框就会被顶上去,不可见,整个页面出现滚动条。搜索了半天在知乎上看到 一条答案:scrollIntoView()去解决,因为软键盘是在获取焦点后出现的,所以所以在一定的时间内不对执行scrollIntoView,

 var header = document.getElementsByClassName("search-topic-header")[0];
 this.interval = setInterval(() => {
     // header.scrollTop = 0;不顶用
     header.scrollIntoView();
 }, 100)             

移动web页面,input获取焦点弹出系统虚拟键盘时,挡住input,求解决方案?

安卓手机返回键不能合理返回

无论安卓手机或者浏览器的返回键,返回的都是上次打开的页面,而页面头部的返回键是用router.push()返回到指定的页面,要想安卓自带的返回键也实现相同的效果,就需要监听手机的返回键,目前好像做不到。下面有个库貌似可以

从网页监听Android设备的返回键

iphone6 ios 8.3 不支持Object.assign

chrome 的remote debugger在安卓上很好用,可是在iOS上用不了,但是可以使用Safari,iOS Remote Debugging,这个还没尝试过,用了一个国人开发的库spy-debugger remote debug非常方便,mac和Windows都支持,发现了如下的错误


项目是babel构建的,babel没有将一些函数装转成ES5,
阮一峰Babel 入门教程
解决办法:
$ npm install --save babel-polyfill
代码头部引入:
`
import 'babel-polyfill';
// 或者
require('babel-polyfill');

ios8.3 不支持flex布局

即使使用了autoprefixer也不支持flex

ios里调用带有搜索按钮的软键盘

刚开始我用<input type="text" /> 外面没有套form标签,采用ajax搜索数据,功能可以实现,但是安卓的键盘显示的是“前往”按钮,iOS的键盘显示的是“换行”按钮,并不是常见的“搜索”按钮,所以参考了怎么设置h5移动端的搜索键盘?这里,这样安卓和iOS的搜索按钮都有了,可是问题来了,点击搜索按钮,URL会更新,页面也就刷新了,这不是我想要的,我要的是ajax请求,想着应该是默认的表单被提交了,那么就要阻止表单的默认提交,我获取数据是通过onkeyup事件,结合vue的写法,

 @submit.prevent.stop="onSubmit"

这样页面就不刷新了

IOS input text readonly 任然能够获取焦点,光标依然存在

ios input 添加 readonly unselectable="on" 属性,光标依旧还在,怎么清除光标

相关文章

  • webapp填坑记

    iPhone 软键盘将文档顶了上去 mobileTechA useful tools or tips list f...

  • Vue 移动端webApp填坑

    1.IOS滚动不平滑的问题 在移动端特别是iOS中,当滚动屏幕时会发现手指一拿开滚动就停止,这种用户体验效果很不好...

  • UiAutomator2.0升级填坑记

    UiAutomator2.0升级填坑记

  • 填坑记

    后台像前台传值时遇到一个问题: 坑1 使用console.log打印后台传来的json值时只显示[object O...

  • 填坑记

    btng_upload_IDcard id 如果控件不冲突,就是控件所在的layout文件冲突了,多module下...

  • 记安装pyspectator填坑记

    原文链接:一只电工的博客 记安装pyspectator填坑记: Environment INFO: windows...

  • activeMQ 填坑记

    前言 MQ是现在大型系统架构中必不可少的一个重要中间件,之前有偏文章《MQ(消息队列)常见的应用场景解析》介绍过M...

  • 填坑记(UI)

    1. tableView刷新闪屏 场景:类似于聊天界面,快速多次发送消息,刷新界面并且滚动到最后一条问题:scro...

  • 填坑记(逻辑)

    1. 在https页面去请求http的资源 问题:https页面内的资源加载不出来,为空白原因:浏览器有安全设置,...

  • webdriverAgent填坑记

    未能载入软件包“WebDriverAgentRunner”,因为它已损坏或丢失必要的资源。 请尝试重新安装软件包。...

网友评论

    本文标题:webapp填坑记

    本文链接:https://www.haomeiwen.com/subject/solgtxtx.html