移动端 h5
- 取消点击时候的透明区域
-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的更多相关文章
- 移动端H5页面高清多屏适配方案
背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
- 解惑好文:移动端H5页面高清多屏适配方案 (转)
转自:http://mobile.51cto.com/web-484304.htm https://github.com/amfe/lib-flexible/blob/master/src/makeg ...
- 移动端H5页面的设计稿尺寸大小规范-转载自http://www.chinaz.com/design/2015/1103/465670.shtml
机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸.现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计.显然不是. 请注意:(以下所有讨论内容和规范均将viewport设定为c ...
- [转]:移动端H5页面高清多屏适配方案
原文链接:http://www.tuicool.com/articles/YJviea 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们 ...
- 移动端h5页面的设计稿尺寸
当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 延伸阅读: 2015年度最 ...
- 移动端H5制作安卓和IOS的坑 持续更新...
移动端H5制作安卓和IOS的坑 持续更新... 前言:最近参加公司的H5页面创意竞赛,又遇到不少页面在不同系统上的坑.踩坑之余,觉得很多之前遇到的知识点都忘了,索性开一篇博文,把这些坑都统一归纳起来, ...
- 教你如何用 lib-flexible 实现移动端H5页面适配
前话 好久没写教程了(可能会误导新手的菜鸟教程( ̄▽ ̄)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...
- 移动端H5页面惯性滑动监听
移动端H5页面惯性滑动监听 在移动端,当你快速滑动有滚动条的页面时,当你手指离开屏幕时,滚动条并不会立即停止,而是会随着"惯性"继续滑动一段距离. 在做项目的过程中,需要监听惯性滑 ...
- 移动端H5地图矢量SHP网格切分打包方案
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 与离线瓦片方案一样,同样是为了解决移动端网速和流量问题,但是却 ...
- 移动端H5活动页优化方案
背景 项目:移动端H5电商项目 痛点:慢!!! 初始方案:最基本的图片懒加载,静态资源放到cdn,predns等等已经都做了.但是还是慢,慢在哪? 显而易见的原因:由于前后端分离,所有的数据都由接口下 ...
随机推荐
- Charm Bracelet 一维01背包
A - Charm Bracelet Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%lld & %llu Su ...
- lua 打印一个table的实现
print("-------------Test-----------------") local tb = {} function printProperties(t, csp) ...
- 标准 I/O 和管道
1.标准输入和输出1>程序:指令+数据(指令服务于数据) 读入数据:input 输出数据:output 2>三种 I/O 设备 Linux 给程序提供三种 I/O 设备 标准输入(STDI ...
- Maven jar包冲突
在pom.xml中引入一个依赖,maven会自动导入这个依赖的依赖,方便的同时也会造成jar包冲突: (1)A.B都依赖C,我们导入A(自动导入C).B(自动导入C),maven自动导入了2个C,到底 ...
- MySQL存储过程和游标
一.存储过程 什么是存储过程,为什么要使用存储过程以及如何使用存储过程,并且介绍创建和使用存储过程的基本语法. 什么是存储过程: 存储过程可以说是一个记录集,它是由一些T-SQL语句组成的代码块,这些 ...
- 剑指offer-面试题66-构建乘积数组-发散思维
/* 题目: 链接:https://www.nowcoder.com/questionTerminal/94a4d381a68b47b7a8bed86f2975db46 来源:牛客网 给定一个数组A[ ...
- python——面向对象(3),搬家具
"""date: 2020.2.9搬家具:将小于房子剩余面积的家具搬进房子1.定义家具类,房屋类""" class Furniture(): ...
- P3884 [JLOI2009]二叉树问题
--------------------- 链接:Miku --------------------- 这一道题只需要在倍增lca的板子上改一改就可以了. 宽度和深度可以在倍增lca的dfs预处理的时 ...
- PRML学习准备
因为很怕PRML课程,所以想提前学习下做点准备. 看的一个学习内容就是python数据处理那本书,比较仔细地学习了 numpy,大致看了pandas和 matplotlib ,有以下几点感受 nump ...
- 使用VConsole调试代码
在真实手机上运行H5页面时,无法看到控制台.为了能在真实手机上使用控制台,可以加入如下代码实现控制台: //引入vconsole var isTestEnvironment =true if(isTe ...