记录手机端h5页面碰到的一些问题
时间:2019-11-30
本文章向大家介绍记录手机端h5页面碰到的一些问题,主要包括记录手机端h5页面碰到的一些问题使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
关于input光标在手机端偏移
问题根本:不要使用line-height
垂直居中。
解决方法:可直接定义height,然后高度由上下padding
值撑开。
移动端清除input光标
ios input 添加 readonly unselectable=”on” 属性,光标依旧还在
input聚焦时马上让它失焦,代码
$('input[readonly]').on('focus', function() {
$(this).trigger('blur');
});
亲测在苹果手机可行
div不知道高宽的情况下居中
支持微信浏览器的translate写法 其他浏览器需要加上-ms-
-moz-
-webkit
- -o-
.parentDiv{
position:relative;
}
.childDiv{
width:100px;
height:100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
手机端弹框背景的透明黑底背景样式
.maskin{
width: 100%;
height: 100%;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 99;
}
css实现单行、多行显示省略号
//单行
div{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
css实现图片正方形加载
在vue中可以使用内联样式循环img :style="{backgroundImage: 'url('+ img +')'}"
url-div {
width:100px;
height:100px;
background-image: url();
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
移动端1px问题
.border-1px {
position: relative;
}
.border-1px:after {
position: absolute;
content: '';
top: -50%;
bottom: -50%;
left: -50%;
right: -50%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
border-bottom: 1px solid #666;
}
移动端字体设置
body {
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;
}
移动端meta设置
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
碰到问题还会记录
原文地址:https://www.cnblogs.com/jlfw/p/11961498.html
- 淘宝的评论归纳是用什么方法做到的?
- Python的机器学习实战:AadBoost
- 通过shell检查分区表中是否含有默认分区(r2笔记87天)
- 利用python爬取人人贷网的数据
- 通过shell脚本查看package的信息(r2笔记86天)
- 通过shell脚本查看procedure的信息(r2笔记85天)
- 支持中文文本数据挖掘的开源项目PyMining
- 通过分区键值发现性能问题(r2笔记84天)
- linux乱码和数据库乱码的问题简单排查(r2笔记83天)
- 一条运行了3天的"简单"的sql(r2笔记82天)
- 海量数据迁移之使用shell启用多个动态并行(r2笔记81天)
- 使用shell测试历史数据样本(r2笔记80天)
- 【专业技术】编译器的工作原理
- ORA-17500 ODM err的问题排查(r2笔记78天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 团体程序设计天梯赛-练习集 L1-001 Hello World
- 团体程序设计天梯赛-练习集 L1-002 打印沙漏
- 团体程序设计天梯赛-练习集 L1-003 个位数统计
- 团体程序设计天梯赛-练习集 L1-004 计算摄氏温度
- 团体程序设计天梯赛-练习集 L1-007 念数字
- 团体程序设计天梯赛-练习集 L1-008 求整数段和
- K8s多租户场景下的多层级namespace规则解析
- 团体程序设计天梯赛-练习集 L1-010 比较大小
- 团体程序设计天梯赛-练习集 L1-012 计算指数
- 团体程序设计天梯赛-练习集 L1-013 计算阶乘和
- 团体程序设计天梯赛-练习集 L1-036 A乘以B
- 团体程序设计天梯赛-练习集 L1-015 跟奥巴马一起画方块
- 团体程序设计天梯赛-练习集 L1-011 A-B
- vuepress引入vue-qr组件后build报错navigator is not defined问题
- 团体程序设计天梯赛-练习集 L1-022 奇偶分家