移动端 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等等已经都做了.但是还是慢,慢在哪? 显而易见的原因:由于前后端分离,所有的数据都由接口下 ...
随机推荐
- 新手必看:PyCharm安装教程,Python开发者的有力工具
PyCharm是由JetBrains打造的一款Python IDE,VS2010的重构插件Resharper就是出自JetBrains之手. 同时支持Google App Engine,PyCharm ...
- python基础入门之三 —— 字符串
1.格式 一对引号和三对引号可以表示字符串 (三引号保留换行) 2.下标 从0开始循序向下分配 str1='abcdefg' print(str1) print(str1[0]) print(str1 ...
- css的核心原理分为优先级原则与继承原则两大部分
css原理:1.优先原则=>后解析的内容会覆盖之前解析的内容(所谓解析就是读取的css样式)2.继承原则=>嵌套里面的标签拥有外部标签的某些样式,子元素可以继承父元素的属性 1>优先 ...
- Vue之计算属性Computed和属性监听Watch,Computed和Watch的区别
一. 计算属性(computed) 1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷. 例如: <div id="app"> {{ myname ...
- MySQL概述及入门(四)
MySql概述及入门(四) 什么是MySQL的锁? 数据库锁定机制,就是数据库为了保证数据的一致性,而使各种共享资源在被并发访问变得有序所设计的一种规则,简单说,就是不让别人动 总的来说,MySQL各 ...
- Mac 下如何判断 WIFI 的极限传输速度还有信号强度?
每当你加入一个无线网络后,按住Option键并点击屏幕右上角的Wi-Fi图标,就会发现除了平常的各种网络外,还出现了关于网络连接技术细节的列表. 比如说,如果想知道信号强度的信息,则需要尤其关注列表中 ...
- 《HTML&CSS design and build websites》学习笔记(1)
Chapter 1: Structure Chapter 2: Text <head>表示标题,默认显示在第一行. <title>表示抬头,显示在浏览器的标签页,还有窗口栏. ...
- Git分支的管理
(一)查看分支 1.查看本地分支:git branch 2.查看远程分支:git branch -r 3.查看所有分支:git branch -a (二)创建分支 1.创建本地分支:git branc ...
- es的分布式架构原理是什么?
es的分布式架构原理是什么? 1.首先说一些分片(shard)是什么? ES中所有数据均衡的存储在集群中各个节点的分片中,会影响ES的性能.安全和稳定性 每个shard都是一个最小工作单元,承载部分数 ...
- es5和es6中如何处理不确定参数
场景:求出不定参数的总数和 //利用arguments function sum () { let num = 0 //Array.prototype.forEach.call(arguments,f ...