Web移动端常见问题
一、按钮点击时出现黑色背景
解决方法:
.class { -webkit-tap-highlight-color:rgba(0,0,0,0);}
.class { -webkit-appearance: none; -webkit-tap-highlight-color: transparent;}
二、iOS中伪类:active失效
解决方法:
$(function(){
document.body.addEventListener('touchstart', function () { });
})
三、移动端常用<meta>标签
<meta content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
四、响应式语法
@media screen and (max-width: 320px){
.class { }
}
@media screen and (min-width: 321px) and (max-width: 375px){
.class { }
}
五、屏蔽浏览器滑动翻页
解决方法
var doc = document.getElementById('id');
doc.addEventListener('touchmove', function(event) {
if(event.target.type == 'range') return;
event.preventDefault();
})
六、input标签placeholder颜色
input::-webkit-input-placeholder{ color: orange;}
input:focus::-webkit-input-placeholder{ color: #09f;}
七、Andriod微信浏览器中a标签如果不使用类名而用标签命名,会让同级标签继承其padding属性。
<style>
.link {
width: 94%;
margin: 0 auto;
border: 1px solid #d8d8d8;
overflow: hidden;
}
.link dt {
overflow: hidden;
}
.link .tel a {
display: block;
float: left;
padding: 0.8rem 0;
}
.link .tel span {
float: right;
color: #d60037;
margin-right: 4%;
}
.link .title .a {
display: block;
float: left;
padding: 0.8rem 0;
}
.link .title span {
float: right;
color: #d60037;
margin-right: 4%;
}
</style> <dl class="link">
<dt class="tel"><a href="#">服务热线</a><span>400-0608-911</span></dt>
<dt class="title"><a class="a" href="#">服务热线</a><span>400-0608-911</span></dt>
</dl>
iOS微信浏览器下:
Andriod微信浏览器下:
八、解除移动端最小12字号的限制
.class { -webkit-text-size-adjust: none;}
九、去除手机自带样式(select,button)
.class { -webkit-appearance: none; appearance: none; -webkit-box-sizing: border-box; box-sizing: border-box;}
十、移动端弹窗出现时,禁止底部内容
$("弹层").on("touchmove",function(event){
if($("弹层").is(":visible")==true){
event.preventDefault();
}
})
Web移动端常见问题的更多相关文章
- web移动端常见问题解决方案 (转)
总结:本文总结了web移动端的常见问题并附上解决方案,包括:Meta标签.获取滚动条的值.禁止选择文本.屏蔽阴影.css之border-box.css3多文本换行.Retina屏幕高清图片.html5 ...
- Web移动端常见问题-摘抄
一.按钮点击时出现黑色背景 解决方法: 1 2 .class { -webkit-tap-highlight-color:rgba(0,0,0,0);} .class { -webkit-appe ...
- 使用react全家桶制作博客后台管理系统 网站PWA升级 移动端常见问题处理 循序渐进学.Net Core Web Api开发系列【4】:前端访问WebApi [Abp 源码分析]四、模块配置 [Abp 源码分析]三、依赖注入
使用react全家桶制作博客后台管理系统 前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基 ...
- Web服务端性能提升实践
随着互联网的不断发展,日常生活中越来越多的需求通过网络来实现,从衣食住行到金融教育,从口袋到身份,人们无时无刻不依赖着网络,而且越来越多的人通过网络来完成自己的需求. 作为直接面对来自客户请求的Web ...
- 关于如何提高Web服务端并发效率的异步编程技术
最近我研究技术的一个重点是java的多线程开发,在我早期学习java的时候,很多书上把java的多线程开发标榜为简单易用,这个简单易用是以C语言作为参照的,不过我也没有使用过C语言开发过多线程,我只知 ...
- 【转载】Web移动端Fixed布局的解决方案
特别声明:本文转载于EFE的<Web移动端Fixed布局的解决方案>.如需转载,烦请注明原文出处:http://efe.baidu.com/blog/mobile-fixed-layout ...
- winform客户端利用webClient实现与Web服务端的数据传输
由于项目需要,最近研究了下WebClient的数据传输.关于WebClient介绍网上有很多详细介绍,大概就是利用WebClient可以实现对Internet资源的访问.无外乎客户端发送请求,服务端处 ...
- web测试安全性常见问题
web测试安全性常见问题 一. 登录账号明文传输 1. 问题一:登录账号密码或者修改密码明文传输 现象:目前物流对内的java系统基本上都是 ...
- Openstack的web管理端相关
openstack的web管理端技术方面要关注的问题. 同步?异步 先说浏览器的同步和异步,我们知道的浏览器可以使用ajax实现异步请求,就是浏览器在请求数据的时候,我们管理员还能对浏览器就行其他操作 ...
随机推荐
- 如何将一个已有的项目托管到github或是码云上?git的配置
场景一:已有的一个项目,要把它托管到Git上去,步骤和方法如下: 方法一: ①在工程的路径下 : git init 建一个裸仓库. ②远程仓库地址 :将本地的仓库和远程仓库关联 git remote ...
- icheck使用
1.使用: <link rel="stylesheet" href="css/skins/all.css">或者<link rel=" ...
- Python 文件操作 day2
一.打开文件的模式1:读.写.追加 1.r读:读模式,只能读,不能写,打开不存在的文件会报错:可省略'r',因为不写默认是读模式 f = open('filename',encoding='utf-8 ...
- springMVC返回汉字字符串乱码,以及返回的字符串乱码的问题
1.springMVC在使用@ResponseBody注解返回字符串为什么出现乱码呢?(这里以spring4.3.1为例) 原因分析:原因在返回字符串时StringHttpMessageConvert ...
- Keras学习基础(2)
目录: Keras的模块结构 数据预处理 模型 网络层 网络配置 Keras中的数据处理 文本预处理 序列预处理 图像预处理 Keras中的模型 Sequential顺序模型 Model模型[通用模型 ...
- 15.5.2 【Task实现细节】骨架方法的结构
尽管骨架方法中的代码非常简单,但它暗示了状态机的职责.代码清单15-11生成的骨架方 法如下所示: [DebuggerStepThrough] [AsyncStateMachine(typeof(De ...
- EasyUI 解决Js动态加载页面样式不显示问题
var strHtml = "<input name='mydate' class='easyui-datebox'>"; 直接使用append把内容加载到页面中,Ea ...
- window.open方法被浏览器拦截的处理方式
问题现象 当我们在一个 ajax 回调中执行 window.open 方法时,新页面会被浏览器拦截. 原因 在 Chrome 的安全机制里,非用户直接触发的 window.open 方法,是会被拦截的 ...
- [luogu2054 AHOI2005] 洗牌 (数论)
传送门 Solution 我们考虑每一步牌的变化: 前半部分的牌位置*2 后半部分的牌位置*2-n-1 那么我们可以看做是\(x\times 2^m\equiv l \pmod n\) 于是求个逆元就 ...
- [luogu2474 SCOI2008]天平(floyd差分约束)
传送门 Solution 由于重量只有三种情况,那么想到用差分约束. 由于范围比较小,想到可以floyed求差分约束,暴力求天平另一边 Code #include <cstdio> #in ...