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

    -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. 一个sql

    一个小功能,sql里面用到了一些玩法,记录一下~ SELECT id, code, path, (1) AS type FROM department WHERE path LIKE CONCAT( ...

  2. GNU make doc - 6.6 追加变量值

    有时我们需要对已经定义过的变量进行追加,可以使用+=进行这一操作,就像下面这样 objects += another.o 该语句取objects变量的值,并在其后追加another.o(结果会在原变量 ...

  3. C语言低级I/O(UNIX接口)

    头文件说明 以下各函数均在<unistd.h>中 flags的各个值定义于<fcntl.h>中 BUFSIZ定义于<stdlib.h>中 (似乎<stdio. ...

  4. bootstrap--font-face问题

    在做仿天猫项目时,预期 已经用cdn加载bootstrap,但是不显示文字图标:实际情况: 发现是引用bootstrap的版本导致的.4.0.0版本及以后的css源码中找不到@font-face.可以 ...

  5. Linux报错:rm: cannot remove 'xxx': Is a directory

    rm: cannot remove 'xxx': Is a directory表示这个文件是无法remove移除的,因此我们不能仅使用rm来将这个文件夹进行删除,需要使用: rm -rf 命令则可以将 ...

  6. centos 记录所有用户操作命令的脚本

    使用history不能看到所有用户的命令记录,如何看所有用户的操作记录. 如下: 在 /etc/profile 最下面加入如下代码即可. PS1="`whoami`@`hostname`:& ...

  7. Hadoop之HDFS扩容方法

    HDFS就是用来存取数据的,那么当数据太多的时候存不下,我们必需扩充硬盘容量,或者换个更大的硬盘. 由于它是分布式文件系统,有两种扩充HDFS集群容量的方法:横向扩容和纵向扩容 横向扩容 横向扩容就是 ...

  8. JavaBIO利用装饰器模式来组织和扩展接口

    Stream接口,它直接负责字节流的传输. Reader/Writer接口,它本身不能读直接读写数据,而是以Stream接口为内部核心,在外围装饰增强,负责字符流的读写.字符和字节的转换过程必须指定字 ...

  9. 简单IOC容器实现

    前言 本文是为了学习Spring IOC容器的执行过程而写,不能完全代表Spring IOC容器,只是简单实现了容器的依赖注入和控制反转功能,无法用于生产,只能说对理解Spring容器能够起到一定的作 ...

  10. 【DTOJ】2704:数字互换

    DTOJ 2704:数字互换  解题报告 2017.11.11 第一版 ——由翱翔的逗比w原创 题目信息: 题目描述 输入两个数作为交换数,输出已交换顺序后的两个值. 输入 两个整数,空格隔开 输出 ...