移动端 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等等已经都做了.但是还是慢,慢在哪? 显而易见的原因:由于前后端分离,所有的数据都由接口下 ...
随机推荐
- Unity 编辑器开发SceneView GUI控制
前几天项目需要就做了个类似于Collider EditCollider的功能 下面是我做的效果 基础代码如下: public class ExportCFGInputWindow : EditorWi ...
- 制作OpenOffice的Docker镜像并添加中文字体解决乱码问题
官网下载openoffice http://www.openoffice.org/download/index.html 本文使用的是Docker官方发布的CentOS7镜像作为基础镜像.镜像的获取方 ...
- 改造SuperMap的DrawHandler接口,自定义绘制的图形样式
超图WebGL三维接口中有一个绘制的接口(new Cesium.DrawHandler(viewer, mode, clampMode),它封装了绘制完之后的式样,画完之后捕捉绘制完成的实体有一定的难 ...
- MySQL - SQL语句优化方法
1.使用 show status 了解各种 SQL 的执行频率 mysql> show status like 'Com%'; 该命令可以查询 sql 命令的执行次数. 2.定位执行效率较低的 ...
- P1308 统计单词数(cin,getline() ,transform() )
题目描述 一般的文本编辑器都有查找单词的功能,该功能可以快速定位特定单词在文章中的位置,有的还能统计出特定单词在文章中出现的次数. 现在,请你编程实现这一功能,具体要求是:给定一个单词,请你输出它在给 ...
- 吴裕雄--天生自然HADOOP操作实验学习笔记:tf-idf算法
实验目的 通过实验了解tf-idf算法原理 通过实验了解mapreduce的更多组件 学会自定义分区,读写缓存文件 了解mapreduce程序的设计方法 实验原理 1.TF-IDF简介 TF-IDF( ...
- js磁力线代码(非压缩,自己在压缩的版本上优化了代码,易于阅读)
拿去白嫖吧: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=" ...
- Docker 下部署hadoop集群
一.主机规划 3台主机:1个master.2个slaver/worker ip地址使用docker默认的分配地址: master: 主机名: hadoop2.ip地址: 172.17.0.2 slav ...
- JS格式时间
Date.prototype.format = function(format) { var o = { "M+": this.getMonth() + 1, //month &q ...
- 理财收益的计算 计算浮点数的n次方 1466
题目描述 老傻非常喜欢购买理财产品,而且这款理财产品被推销人员吹得特别高,对于贪财的老傻来说正中下怀,于是在心里盘算着买了它,自己就是亿万富豪,现需要你编写一个程序,帮老傻计算其收益,老傻的投入是R( ...