随笔分类 - 移动web
摘要：前言 最近一段时间在做 H5 聊天项目，踩过其中一大坑：输入框获取焦点，软键盘弹起，要求输入框吸附（或顶）在输入法框上。需求很明确，看似很简单，其实不然。从实验过一些机型上看，发现主要存在以下问题： 在 Android 和 IOS 上，获知软键盘弹起和收起状态存在差异，且页面 webview 表现不
阅读全文
摘要：移动端web缩放有两种： 1.双击缩放； 2.双指手势缩放。 在iOS 10以前，iOS和Android都可以通过一行meta标签来禁止页面缩放 但iOS 10开始，meta设置在Safari内无效了。 后来在网上看到一个解决方案： 经过测试，这种方法只能禁止双击缩放。只好继续找解决方案了。 原来在
阅读全文
摘要：为一个app写了一个嵌套的提现页面，效果如下图 input给定宽高，给了line-heigh，在浏览器查看效果正常，placeholder内容以及光标显示都是垂直居中的， IOS显示正常， Android华为手机上placeholder以及光标都失效，都没有垂直居中， 最后给input设置样式， l
阅读全文
摘要：对于实现效果来说，插件的办事效率真的是太高了，而且里边也被处理过兼容性，用起来实在是特别方便，现在我们来说说大话主席中的slide插件，它分为pc端（superslide）和移动端（touchslide）。 superslide： 1、引用jQuery.js 和 jquery.SuperSlide.
阅读全文
摘要：这几天在做项目中用到了flex布局，但是在测试的过程中发现他的兼容性实在是太差了，仅仅用到水平和垂直居中的样式，没想到兼容性代码就写了好几行。 display：flex; justify-content：center; align-items:center; 此结论都来源于百度，资料网址为 http
阅读全文
摘要：这几天在做项目的时候，遇到了比较棘手的问题，便是在一个标签里边展示内容，如果说展示中文汉字，一点问题都没有，但是只要连续展示英文字母或者中文的标点符号（中间不带空格），那么所渲染的内容就不会换行，而是超出标签来显示，如下图： 为了解决让所有的内容都不超出标签的宽度，超出后自动换行的问题，便找到了wo
阅读全文
摘要：前一阵子接触到了mobiscroll插件，用在移动端的日期选择上，感觉倍棒，于是便敲了一个小案例，与大家一起分享分享
阅读全文
摘要：据了解，现在有两种rem布局的样式控制，其中一种是通过css的媒体查询，另外一种是通过引入js来控制，这两种方法各有各的优点，但是我还是喜欢用引入js的方法来实现rem布局，尽管现在市面上大多数都在使用css媒体查询的方式实现，在此我就将这两种方法做一总结： 方法一：常用方法，css媒体查询 对于这
阅读全文
摘要：接触过移动端开发的前端可能都会面临点击事件的第一个问题：click事件的300ms延迟响应。不能立即响应给体验造成了很大的困扰，因此解决这个问题就成为了必然。 这个问题的解决方案就是：zepto.js的tap事件。tap事件可以理解为在移动端的click事件，而zepto.js因为几乎完全复制jQu
阅读全文
摘要：引起原因：弹框的定位采取position：fixed，而ios（safari）对定位属性position：fixed的解析不一致导致。 解决方案： 方案一 一开始上网找解决方案，找到如下处理方式。但存在当页面出现滚动条时，弹框弹出后，页面回滚至顶部。在不改变原有弹框代码的情况下，有效地解决光标错位问
阅读全文
