记录手机端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" />
碰到问题还会记录
记录手机端h5页面碰到的一些问题的更多相关文章
- vue+node开发手机端h5页面开发遇到的坑
项目进行中...随时更新 这里记录了一些手机端调试的方式 一 css 1.文字超过span宽度显示...(单行文字) .topWrap .introduce span { padding: 0 17p ...
- iPhone X 适配手机端 H5 页面通用解决方案
一:本文提供两种解决方案 1.终端解决方案(最优,建议选择) 2.web解决方案 导语: iPhone X的出现,一方面对于整个手机行业的发展极具创新领头羊的作用,另一方面也对现有业务的页面适配带来了 ...
- 手机端h5页面 图片根据手势放大缩小
pinchzoom.js 这个插件可以简单的实现这一功能 <div class="big_pos_img page"> <div class="pinc ...
- 【极品代码】一般人我不告诉他,手机端h5播放时不自动全屏代码
已测适用于ios,某些安卓手机微信下播放视频会出现播放器控件(这个实在是无力吐槽噢,因为之前还遇到过微信播放完视频后竟然无法退出全屏出现广告的情况,只有播放完后刷新页面并且要放到框架页里才能屏蔽微信视 ...
- 移动手机端H5无缝间歇平滑向上滚动js代码
在没结合css3的transform实现平滑过渡前,我都是用的jquery的animate方法,此方法在PC端基本看不出来有稍微卡顿的现象,但是在性能不高的手机上使用该方法,就会有明显的卡顿现象,不够 ...
- 【工具】PC端调试手机端 Html 页面的工具
一.概述 有一个项目需要在手机端显示一个 web 页面,而每次把应用 launch 后,从手机端看比较麻烦,因此搜罗了几种在 PC 端调试手机端页面的工具. 二.工具 http://fonkie.it ...
- 手机端H5 header定义样式
<meta content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0" ...
- 编写手机端自适应页面案例,springMVC代码,SpringMVC上传代码,去掉input框中原有的样式,使ios按钮没有圆角,css中的border-radius类似
1.编写的页面 <%@ page language="java" contentType="text/html; charset=UTF-8" page ...
- 关于手机端h5上传图片配合exif.min.js,processImg.js的使用
首先这里有个new FileReader()的概念,这是h5新增的,用来把文件读入内存,并且读取文件中的数据.FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件 ...
随机推荐
- springboot2.0+mycat实验读写分离
声明:用户到达一定程度,架构就必须要考虑,因为在这个前提下,读写分离,尤为重要. 1.搭建mysql主从复制 https://www.cnblogs.com/ywjfx/p/10264383.html ...
- Linux下监控网卡流量的软件Nload
Linux下监控网卡流量的软件Nload 安装nload: # wget http://www.roland-riegel.de/nload/nload-0.7.2.tar.gz # tar zxvf ...
- 使用Nginx做WebSockets代理教程
WebSocket 协议提供了一种创建支持客户端和服务端实时双向通信Web应用程序的方法.作为HTML5规范的一部分,WebSockets简化了开发Web实时通信程 序的难度.目前主流的浏览器都支持W ...
- Object Creation
Although using the object constructor or an object literal are convenient ways to create single obje ...
- bootstrap datetimepicker、bootstrap datepicker日期组件对范围的简单封装
1.bootstrap datepicker 使用 <div class="row form-group"> <label class="control ...
- win server2012r2上发布网站常见错误 "HTTP 错误 500.19 请求的页面的相关配置数据无效" 解决办法
HTTP 错误 500.19 - Internal Server Error无法访问请求的页面,因为该页的相关配置数据无效. 问题“详细错误信息模块 IIS Web Core通知 BeginReque ...
- nanomsg安装和测试
最近在构建一个中间层的通信架构,本来想用dbus,在实验过程中发现dbus对于国产系统支持版本比较低,安装比较麻烦,今天无意中看中了nanomsg,尽管没有dbus那么强悍的生态,但基本能满足需求. ...
- 关于Anaconda3 (64-bit)的一些体验
最近因为在学习数据分析,所以安装了Anaconda3 (64-bit),最新版,支持py3.7 优点:自带了720个库(官方宣布),自带notebook,spyder.不用自己再去pip各种库了(基本 ...
- P1551 亲戚
这里是题面啊~ 这道题我就不多说了,基本(好吧没有基本)就是一道模板题,读入+并查集+输出,完美结束 #include<set> #include<map> #include& ...
- cf1151e number of components
很常见的思想:将整体求改为统计每个部分的贡献 本题中统计[l, r]时, 每个连通块有一个重要特征, 最右端的数在[l,r]中而下一个数不在(好像是句废话 那么我们分别考虑每个点对连通块的贡献, 即它 ...