• 取消点击时候的透明区域

    -webkit-tap-highlight-color: rgba(0,0,0,0);
  • iphonex 适配
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover">

    padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
  • 文字不能选择

    user-select: none;
  • 图片不能操作

    pointer-events: none;
  • outline: none; 去掉input foucs态 input 框样式
  • input placeholder 样式修改
input::-webkit-input-placeholder {
/* WebKit browsers */
color: #cccccc;
} input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #cccccc;
} input::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #cccccc;
} input:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #cccccc;
}
  • 移动端 ios input placeholder 展示不全 line-height: normal; placeholder 的字体大小要小于input 否则会展示不全

  • 有输入框相关的页面不要用fixed,改成absolute

  • align-items: center; // 不能垂直居中 加, line-height: normal;

  • placeholder //字体要小于input 的字体 否则会被挡住部分展示不全

移动端 h5的更多相关文章

  1. 移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  2. 解惑好文:移动端H5页面高清多屏适配方案 (转)

    转自:http://mobile.51cto.com/web-484304.htm https://github.com/amfe/lib-flexible/blob/master/src/makeg ...

  3. 移动端H5页面的设计稿尺寸大小规范-转载自http://www.chinaz.com/design/2015/1103/465670.shtml

    机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸.现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计.显然不是. 请注意:(以下所有讨论内容和规范均将viewport设定为c ...

  4. [转]:移动端H5页面高清多屏适配方案

    原文链接:http://www.tuicool.com/articles/YJviea 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们 ...

  5. 移动端h5页面的设计稿尺寸

    当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 延伸阅读: 2015年度最 ...

  6. 移动端H5制作安卓和IOS的坑 持续更新...

    移动端H5制作安卓和IOS的坑 持续更新... 前言:最近参加公司的H5页面创意竞赛,又遇到不少页面在不同系统上的坑.踩坑之余,觉得很多之前遇到的知识点都忘了,索性开一篇博文,把这些坑都统一归纳起来, ...

  7. 教你如何用 lib-flexible 实现移动端H5页面适配

    前话 好久没写教程了(可能会误导新手的菜鸟教程( ̄▽ ̄)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...

  8. 移动端H5页面惯性滑动监听

    移动端H5页面惯性滑动监听 在移动端,当你快速滑动有滚动条的页面时,当你手指离开屏幕时,滚动条并不会立即停止,而是会随着"惯性"继续滑动一段距离. 在做项目的过程中,需要监听惯性滑 ...

  9. 移动端H5地图矢量SHP网格切分打包方案

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 与离线瓦片方案一样,同样是为了解决移动端网速和流量问题,但是却 ...

  10. 移动端H5活动页优化方案

    背景 项目:移动端H5电商项目 痛点:慢!!! 初始方案:最基本的图片懒加载,静态资源放到cdn,predns等等已经都做了.但是还是慢,慢在哪? 显而易见的原因:由于前后端分离,所有的数据都由接口下 ...

随机推荐

  1. Hello Rust!

    准备工作 Rust是系统编程语言,会经过传统的编译.链接.生成可执行文件等过程.它依赖c/cpp的编译环境,需要提前安装c/cpp开发环境,比如安装gcc及其依赖等. 安装(macOS / Linux ...

  2. 在命令提示符中的有关mysql命令

    -h:当连接MySQL服务器不在同台主机时,填写主机名或IP地址 -u:登录MySQL的用户名 -p:登录MySQL的密码 注意:密码如果写在命令行的时候一定不能有空格.如果使用的系统为linux并且 ...

  3. ElasticSearch集群-Windows

    概述 ES集群是一个P2类型的分布式系统,除了集群状态管理以外,其他所有的请求都可以发送到集群内任意一台节点上,这个节点可以自己找到需要转发给哪些节点,并且直接跟这些节点通信.所以,从网络架构及服务配 ...

  4. 目标检测:yolo-v3与faster-rcnn

    一. 算法背景 1. 机器视觉实际应用往往涉及包含多个物体的复杂场景,基于深度卷积神经网络的特征提取器,需要结合其他算法来准确定位多个目标,并进行识别. 2. 工业领域,目标检测算法在安防和质检系统都 ...

  5. WannaMine4.0查杀方法

    病毒现象 扫描爆破内网基于445端口的SMB服务 服务器出现卡顿.蓝屏 服务器主动访问恶意域名:totonm.com.cake.pilutce.com:443 病毒处置 删除关键病毒文件:C:\Win ...

  6. idea生成构造方法的快捷键(看这篇就够了)

    使用快捷键能加快编写代码的速度和质量 idea生成构造方法的快捷键是Alt+Insert,然后选中Constructor

  7. Gartner评估:众包将掀起IT服务市场的革命

    国际IT顾问与咨询公司Gartner发布评估报告,称众包是中国的一种新兴业务模式,将掀起IT服务市场的革命.然而,只有很少的的服务提供商会构建众包平台来尝试使用该业务模式.IT服务提供商的业务部门负责 ...

  8. #6029. 「雅礼集训 2017 Day1」市场 [线段树]

    考虑到每次除法,然后加法,差距会变小,于是维护加法lazytag即可 #include <cstdio> #include <cmath> #define int long l ...

  9. 什么是kafka,怎么使用? (3)

    上次我因为在windows上解压一个.gz的包没有解压出来,故需要在linux使用kafka,而且这kafka的快速开始上有个zookeeper的文件配置 所以我感觉有必要把dubbo-zookeep ...

  10. ora.vip 1 ONLINE INTERMEDIAT

    问题出现情景: 三节点12C rac某次扩存储,两个节点同时重启,其中一个节点 ora.rac1.vip 1 ONLINE INTERMEDIATE rac2 FAILED OVER   出现原因可能 ...