webapp填坑记录[更新中]
网上也有许多的 webapp 填坑记录了,这几个月,我在公司正好也做了2个,碰到了一些问题,所以我在这里记录一下我所碰到的问题:
- meta 头部声明
在开发的时候,刚刚创建 HTML 文件,再使用浏览器的手机模式是没有手机上的效果的,所以要在头部添加:<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
这一串代码,就会模拟出手机的效果,并且还有其他好处:
width=device-width :表示宽度是设备屏幕的宽度
initial-scale=1.0:表示初始的缩放比例
user-scalable=no:表示用户是否可以调整缩放比例
minimum-scale=1:表示最小的缩放比例
maximum-scale=1:表示最大的缩放比例 - css 宽度使用 rem
这个网上有很多源码可以使用,加载一下不超时10多 k 的大小吧,简单好用,好处就是比如0.5rem大小的字体可以根据手机屏幕的大小自动缩放,不过有一些也可以不用,可以用 px 来代替,比如: border,background-size等等,还有宽度,高度,也尽量用百分比来控制会好点; - 页面布局 flex
尽量采用 flex 布局,关于上下,左右居中都十分方便,这里给出我之前写过的一片博客关于 flex 布局的 http://www.cnblogs.com/Grewer/p/7618096.html
还有最重要的一点就是在 flex 布局里,如果最大的节点高度设为100%的话,要注意手机软键盘的问题,点开软键盘可能会让元素发生缩放,这个时候可以使用flex-shrink:0
使用 flex 布局,最好定义一个全局变量,比如 .flex{display: -webkit-box;display: -moz-box;display: -webkit-flex;display: -ms-flexbox;display: flex;}然后再其他页面加上 flex的 class 就可以方便的使用; - 表单提交
在 webapp 里表单提交的体验很差,可能 h5的 api 没有什么好的支持,比如在填写账号和密码的时候,我刚填写完账号,软键盘的右下角是确定或者确认的字样,很奇怪;虽然可以监听回车键的动作,调到密码栏里,但是对于这我还是有强迫症的,然而我也并没有什么好的方法解决;
在一个就是填写账号密码,在填写完密码后,右下角也还是和上面一样,并没有什么改变,不过这个可以用添加 form 表单的方法解决,详情请自行搜索;
还有就是能全部填写数字的时候 input 的 type尽量写 number 这样软键盘打开的时候是数字键盘,比 text 体验会好很多;
在 IOS 中需要纯数字键盘的话,需要这样:<input type="number" pattern="[0-9]*" >
但是他也有缺陷,就是没有小数点,请大家酌情使用
再就是上传图片的问题,尽管只需要添加一个 input type="file" 的标签就行了,但是任然没有 api 可以自由选择照片的来源是照相机还是相册,我在网上搜索的时候,发现他们说是capture=“camera”这个可以解决,但是我亲身测验我的 iPhone 和 Android 都没有效果,和没有加一样;
- iPhone 自带的a标签特效
不知道你们有没有这个,反正我这儿是有的,就是原来是淡灰色的下划线,点击或者刷新任何页面后,再进去此页面,下划线颜色会变得更深,感觉又细了很多,这是 iPhone 的自带效果
可以同过全局或局部的 a 标签的定义来解决,如像我这样a:link {color: #d9d9d9}a:visited {color: #d9d9d9}即可 - border
border 的宽度问题,很多人想用宽度为0.5px 宽度来设置 border, 但是因为手机型号的问题会让有的能正常显示,而有的无法显示,这个可以使用我这样的方式来设置.item:after {
border-bottom: 1px dashed #888;
content: "";
display: block;
width:100%;
-webkit-transform: scale(1, 0.5);
transform: scale(1, 0.5);
} input 光标
在点击 input 的时候,我们想要跳出的是一个下拉选择框或者其他,但是这时候光标仍在 input 上,
1.使用unselectable="on" (缺点 IOS 无效);
2.添加onfocus="this.blur()" 都有效当你使用软键盘的回车键进行提交时,比如 Vue 的 @keyup.enter="submit" 这样的操作时,一定要在 submit 里blur该输入框的焦点, 不然跳转到其他页面的时候,软键盘还会继续跳出来
- 不定高度的 overflow
在选择下拉框或者选项卡的时候,会出现一种情况(某一个选项会很多,而某些选项会比较少),当选项很多的时候很多人都会想到 overflow, 但是不能设定固定的高度怎么办(因为比如某个选项是比整个屏幕要大的你设置 heiht:100%的时候,选择选项比较少的几个选项时也会让高度变为100%,但是又不能变成50%,因为有一些高度还是没那么高,会多出很多空白),这个时候需要用到组合{max-height:100%,overflow:scroll}他会让高度大于100%的选项卡出现能滚动的效果,但是 height 不足100%的时候仍然还是 height:auto 的效果也没有 overflow;
如果无效,请确认 overflow:scroll 是否支持和子元素 是否带有监听了 touchstart 并且带有 event.preventDefault()这样的属性; iPhone 手机拍照产生的照片翻转
如果只是显示在页面上,那么没有问题, html 会自动转换,但是如果要显示在 canvas 上进行截图,放大,缩小等操作就需要改变了;
使用 exif.js 或者其他方法获取图片的翻转度,再用 canvas 旋转图片,来获取正确的图片;
我新写了一个项目可解决ios手机上传竖拍照片旋转90度的问题:https://github.com/Grewer/appleCameraFix- iOS 时间显示错误
在 iOS 上在解析 类似于 new Date("2018-02-01 22:22:11") 这样的时间时,会出现时间的错误,要注意,单独解析 new Date("2018-02-01") 这样的日期是没有问题的,解决的方法很简单,使用正则替换即可:let time = "2018-02-01 22:22:11"
time = time.replace(/-/gm ,"/");
let d = new Date(time) - iOS 中使用 css3的渐变色和 transform: translateX(-50%) 时会出现一条竖线的 bug
效果如图:
解决的方法也很容易:使用硬件加速,即 translate3d :transform: translateX(-50%);
transform: translate3d(-50%, 0, 0);即可成功解决;
webapp填坑记录[更新中]的更多相关文章
- webapp填坑记录
网上也有许多的 webapp 填坑记录了,这几个月,我在公司正好也做了2个,碰到了一些问题,所以我在这里记录一下我所碰到的问题: meta 头部声明在开发的时候,刚刚创建 HTML 文件,再使用浏览器 ...
- Phoenix踩坑填坑记录
Phoenix踩坑填坑记录 Phoenix建表语句 如何添加二级索引 判断某表是否存在 判断索引是否存在 Date类型日期,条件判断 杂项 记录Phoenix开发过程中的填坑记录. 部分原文地址:ph ...
- Kafka踩坑填坑记录
Kafka踩坑填坑记录 一.kafka通过Java客户端,消费者无法接收消息,生产者发送失败消息 二. 一.kafka通过Java客户端,消费者无法接收消息,生产者发送失败消息 在虚拟机上,搭建了3台 ...
- Linux踩坑填坑记录
Linux踩坑填坑记录 yum安装失败[Errno 14] PYCURL ERROR 6 - "Couldn't resolve host 'mirrors.aliyun.com'" ...
- F2eTest和uirecorder自动化测试环境部署填坑记录
坑1:尝试部署的时候只在opennode.bat里面填写了两个浏览器,测试通过后再增加其他浏览器,页面上一直不显示. 填坑:需要清空数据库里的`wd_browsers`和`wd_nodes`表,然后重 ...
- 微信小程序发送红包功能。填坑记录
微信官方文档 1.开通条件 (1)商户号已入驻90日 (2)商户号有连续30天正常交易 (3)只有企业资质的商户才有资格申请 2.注意事项 (1)目前小程序红包仅支持用户微信扫码打开小程序 (2)小程 ...
- MVC5项目转.Net Core 2.2学习与填坑记录(1)
流程都是自己摸索,错误地方随便指正... 老项目过于臃肿,并且所有请求都是提交到一个api中,这样当api挂掉的时候,基本所有的项目都瘫痪掉了. 在4月底的时候,下决心将项目用微服务进行重写,刚开始的 ...
- [Vim 填坑] 01 Vim 中替换与注释的补充
目录 1. print( 坑的信息 ) 2. 开始填坑 (1) :n1,n2s/old/new/gc 的后续命令 ^E ^Y (2) 利用"V-可视"模式进行多行注释 1. pri ...
- 微信小程序开发技巧及填坑记录
以下是自己在开发过程中遇到的坑和小技巧,记录以下: 1.出现了 page[pages/XXX/XXX] not found.May be caused by :1. Forgot to add pag ...
随机推荐
- 运维&网络知识(一)
1. DNS 域名系统(Domain Name System),因特网上作为域名和IP地址映射的一个分布式数据库.
- win10 输入法禁用IME
发现了win10 没法输入,因为禁用IME 右击开始 计算机管理 任务计划程序 打开到Microsoft/Windows/TextServicesFramework 选择操作运行 选择如果任务失 ...
- 系统讲解CSS,前端开发最神奇的技术,新手的你一定不能错过
前面小编带领大家重温了前端开发中最基本的HTML语言.如果你已经掌握了这门语言,那么恭喜你,可以去深入了解CSS技术了.CSS技术最主要的功能就是弥补HTML标记对在页面中显示外观的不足,对这些标记对 ...
- Chrome等浏览器下出现net::ERR_BLOCKED_BY_CLIENT的解决办法
当我们在做开发时,调试页面图片会出现部分图片无法正常显示,并且确认图片的地址正确: 按F12 Debug查看报错原因,提示net::ERR_BLOCKED_BY_CLIENT错误,但当我们点击图片地址 ...
- Maven Install指令构建时出现找不到符号
检查引用的JRE编译的版本,可能由于JRE编译版本太低导致的
- 【前端】windows64位必备软件清单
目录 一.前言 二.日常必备 三.前端相关 四.个人习惯 一.前言 重做系统以后,安装各种软件就是挺烦人的一件事. 特地整理成文章,并且将相关软件上传到了百度网盘,省的以后再各种找资源了. 百度网盘下 ...
- angular.js基础
内置指令 所有的内置指令的前缀都为ng,不建议自定义指令使用该前缀,以免冲突.首先从一些常见的内置指令开始.先列出一些关键的内置指令,顺便简单说说作用域的问题. ng-model 将表单控件和当前作用 ...
- LINUX 笔记-vmstat命令
procs -----------memory---------- ---swap-- -----io---- -system-- ------cpu----- r b swpd free buff ...
- jQuery Ajax跨域问题简易解决方案
场景:由于业务需求,需要在一个页面显示另外一个页面,并且右键查看源代码看不到一条链接. 实现方式:使用iframe来显示这个首页,至于首页的地址则使用jQuery Ajax来获取.html代码如下: ...
- python 生成器和迭代器
迭代器协议 1.迭代器协议是指:对象必须提供一个next方法,执行该方法要么返回迭代中的下一项,要么就引起一个Stoplteration异常,以终止迭代(只能往后走不能往前退) 2.可迭代对象:实现了 ...