移动端的爬坑路

暂时有几个常见的需要注意一下,防止被坑。

1、手机浏览器会突然缩小顶部栏或者干脆消失。这是由于使用了浏览器默认滑动事件造成的。所以整体项目要么都使用滑动事件,要么就只使用touch滑动事件,比如better-scroll。
2、ios对h5css position属性支持是有些问题的,比如fixed与input同时使用,会造成input获得焦点fiexd布局失效,这是对fiexd不友好支持所造成。

3、布局是移动端的一大坑,特别是一些属性其实很多手机厂商深度优化后的系统浏览器支持的不是很好,比如华为、魅族,像img span 这样的标签使用为了兼容,最好加上display block display inline-block 属性,因为block属性基本都支持,但inline-block不一定支持,但如果不加block,只加inline-block会有问题的。

4、line-hieght一定要配合height使用,否则在一部分浏览器会不支持。

5、给img加100%属性或者给img父标签加100%属性会在一部分浏览器出现兼容性问题,最好加一个具体值。

6、flex属性在移动端支持的其实没有那么好,所以使用flex布局一定要加上block属性。

暂时只想起这么多,以后再加。

时间: 2024-08-01 00:11:30

移动端的爬坑路的相关文章

移动端浏览器爬坑之旅

以前总觉得移动端页面也很容易写,最近才下笔,简直五步一坑,十步一雷.查阅了些资料,整理出了部分浏览器兼容性bug. 有问题就跟浏览器客服提出来,一般他们是会处理的.那么就以二师兄展开本次分享. QQ浏览器X5内核问题汇总 https://www.qianduan.net/qqliu-lan-qi-x5nei-he-wen-ti-hui-zong/ 微信浏览器 因为微信浏览器屏蔽了一部分链接图片,所以需要引导用户去打开新页面,可以用以下方式判断微信浏览器的ua function is_weixn(

多线程爬坑之路-Thread和Runable源码解析之基本方法的运用实例

前面的文章:多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁,Atomic原子类) 多线程爬坑之路-Thread和Runable源码解析 前面大致的了解了Thread的一些方法和属性下面对一些方法进行运用看看具体效果<下面可能还是会贴很多的源代码,其实我是拒绝的,我只想贴每个方法的代码,但是有时候看到一个方法里面有调用了方法,但是笔者有没有给出来,很蛋疼,有种爽到一半的感觉,所以我还是会把它贴出来,希望一次就能挖到底,不论有没有全懂,但至

Tinker + Bugly + Jenkins 爬坑之路

前阵子 Android 端的线上崩溃比较多,热修复被提上日程.实现方案是 Tinker,Jenkins 打包,最后补丁包上传到 Bugly 进行分发.主要在 Jenkins 打包这一块爬了不少坑,现记录下来,供大家参考. 1. Tinker + Bugly热修复实现 首先是本地实现,按照官方文档,只要一步一步按照文档来,这个步骤还是比较容易的,这里就不再赘述了,不懂的可以先参考官方文档:Bugly Android热更新使用指南.Bugly Android热更新详解.这里贴一下接入流程: 打基准包

vue 爬坑之路---can&#39;t resolve &#39;sass-loader&#39;

环境设置好以后 本以为可以开心的写代码了, 谁料到如下报错,大概意思就是不能编译 sass-loader 这个玩意. 那怎么办?? 安装依赖,不然能怎么办? 第一个依赖: npm install sass-loader 第二个依赖: npm install node-sass 这样安装了之后,然后npm run dev  ,世界一片祥和~ vue 爬坑之路---can't resolve 'sass-loader' 原文地址:https://www.cnblogs.com/liuguoying/

安卓易学,爬坑不易——腾讯老司机的RecyclerView局部刷新爬坑之路

针对手游的性能优化,腾讯WeTest平台的Cube工具提供了基本所有相关指标的检测,为手游进行最高效和准确的测试服务,不断改善玩家的体验.目前功能还在免费开放中. 点击地址:http://wetest.qq.com/cube立即体验! 作者:Hoolly,腾讯移动客户端开发工程师. 商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处 WeTest导读 安卓开发者都知道,RecyclerView比ListView要灵活的多,但不可否认的里面的坑也同样埋了不少人.下面让我们看看腾讯开发工程

React爬坑秘籍(一)——提升渲染性能

React爬坑秘籍(一)——提升渲染性能 ##前言 来到腾讯实习后,有幸八月份开始了腾讯办公助手PC端的开发.因为办公助手主推的是移动端,所以导师也是大胆的让我们实习生来技术选型并开发,他来做code review.之前也学习过React,当然也是非常合适这一次的开发. 我会梳理这一个月来,自己对架构的思考过程和踩过的坑.当然这一切都不一定是最佳的,所以希望能有更多的建议和讨论. 例子所需库:Webpack.React.Immutable.其中Webpack用于前端构建,如果不清楚的同学可以看这

【爬坑】Python 3.6 在 Socket 编程时出现类型错误 TypeError: a bytes-like object is required, not &#39;str&#39;

1. 问题描述 Python 3.6 在 Socket 编程时出现错误如下 Traceback (most recent call last): File "F:/share/IdeaProjects/test/mypython/test/test10_tcpclient.py", line 17, in <module> sock.send(str) TypeError: a bytes-like object is required, not 'str' Process

小程序实现语音识别转文字,坑路历程

最近为小程序增加语音识别转文字的功能,坑路不断,特此记录. 微信开发者工具 开发者工具上的录音文件与移动端格式不同,暂时只可在工具上进行播放调试,无法直接播放或者在客户端上播放 debug的时候发现,工具上录音的路径是http://tmp/xxx.mp3,客户端上录音是wxfile://xxx.mp3. 忽悠呢,不是格式不同,是映射路径不同.其实做个兼容也不难,每次提示一行文字,很丑. 采样率与编码码率限制 每种采样率有对应的编码码率范围有效值,设置不合法的采样率或编码码率会导致录音失败.详细看

爬坑PIL,文件名Image与类Image()重名,导致引用new,open不成功,报错 type object &#39;Image&#39; has no attribute &#39;new&#39;

网上的东西真坑人啊 在知乎里看到的最有意思的python项目,于是选了一个qrcode二维码的项目来自己尝试 github里下载到pycharm之后就开始了踩坑之路. 先说安装pillow 升级pip到19.2.3版本之后,安装pillow(pip install pillow) 之后尝试导入 import Pillow / import pillow / import PIL 死活没有,我很纳闷.卸了重装都没效果依旧导入失败. 然后手动查找到底有没有,于是打开site-package. 大爷的