移动端css样式兼容
1、1px边框问题
问题:不同的浏览器对于border:1px像素显示的大小不一样
解决方案:可以利用元素的伪类,来设置1px边框
.parent{position: relative;height: 100px;width:100px;background: yellow;
}
.parent:after{content: '';position: absolute;top: 0;left: 0;width: 100%;border: 1px solid gray;transform-origin: 0 0;transform: scaleY(0.5);
}
2、input type='button'在ios和安卓上的默认显示样式不一致
原因:IOS下有默认的按钮渲染方式(颜色渐变和圆角)
解决方案:给所有的input元素设置如下样式,就可以统一默认样式了
input{-webkit-appearance:none;
}
3、input框聚焦时,外层边框高亮,有背景色
去掉边框高亮的解决方案
input:focus{-webkit-appearance: none;
}
input{outline: none;
}
4、input. textarea输入框在底部的时候,点击输入框,安卓会出现键盘将输入框挡住了,而ios会将页面整个上移动,但是键盘关闭时候,页面没有自动下移
解决方案:
focus的时候,调用输入框的scrollIntoView方法
失焦的时候,将页面滑动到顶部
<input ref="input" v-model="val" type="text" @focus="focusBlur('focus')" @blur="focusBlur('blur')" />focusBlur (val) {if (val === 'focus') {document.body.scrollTop = document.body.scrollHeight;} else {window.scroll(0, 0)}}
问题:利用输入框的聚焦和失焦事件来处理会存在这样一种现象,当focus时候,用户输入文字,输入完之后,在输入框聚焦的时候,直接点击提交按钮,会 出现键盘被隐藏,但是提交事件没有触发,需要再次点击按钮,点击事件才会触发。
原因:失焦事件先于点击事件
解决方法:将失焦事件里面的逻辑用setTimeout延后在处理,这样就会触发点击事件,同时也会走失焦的逻辑
5、input框自动聚焦
场景:一进到页面,就让输入框自动聚焦
实现方法:给input框设置属性autofocus,如果没有聚焦的话,就通过给元素添加focus方法聚焦
<template><div><input type="text" ref="inputElemet"></div>
</template>mounted () {this.$refs['inputElemet'].focus()}
问题:如果我们在写路由规则时候,用的是import()函数异步引入,用上面的写法,在iOS上会出现第一次进页面的时候,不会聚焦,下次进就会聚焦了
原因:webpack会解析import语法,将其文件生成一个bundle,在真正进入该路由页面的时候,才会加载该文件,而加载文件和渲染页面需要时间,而focus的处理也是在一定时间内处理的,当页面渲染完之后,已经过了处理focus事件的时机,所以就会出现不聚焦的情况
解决方案:将路由中的异步引入,改成同步加载
6、input输入框拉起的键盘的右下角按钮文案由“换行”变成“搜索”
<input type="search">
问题:像上面的写法,在安卓机上,会由“换行”变成了“搜索”,但是在ios上不生效
解决方法:将input放在form中并且在form中设置action的值;input的type=search
<form action="javascript:return true"><input type="search" /></form>
7、type=search的input框在聚焦后会在输入框的右边有个默认的取消按钮
产生取消按钮原因:有的浏览器默认给type=search的input框添加了一个伪元素,即取消按钮
去掉默认取消按钮的方法:
input[type=search]::-webkit-search-cancel-button{-webkit-appearance: none;
}
8、给输入框的placeholder设置字体颜色
input::-webkit-input-placeholder { color: #CCCCCC;
}
input:-moz-placeholder {/* Mozilla Firefox 4 to 18 */ color: #CCCCCC;
}
input::-moz-placeholder {/* Mozilla Firefox 19+ */color: #CCCCCC;
}
input:-ms-input-placeholder {color: #CCCCCC;
}
9、在ios下输入框的问题:输入框聚焦的时候,不显示光标,每输入一个字符的时候,就需要手动聚焦
解决方法:在input框添加属性: -webkit-user-select: text !important;
10、margin-bottom在ios下失效
场景:页面底部有一个fixed布局的footer,中间有一个container,本意是当container内容过长的时候,可以拖动页面上滑,使container的内容可以浏览全,不被footer遮住
问题:刚开始给container设置了margin-bottom的值为footer的高度,在安卓手机下可以上拉浏览完container的内容,但是ios下却拖不动页面,导致congtainer底部内容被footer遮住了
解决方案:将container的margin-bottom改成padding-bottom
11、 父元素设置了transform,导致fixed定位没有生效
CSS3 transform对普通元素的N多渲染影响 « 张鑫旭-鑫空间-鑫生活,fixed 定位的失效 - mufengchun - 博客园
注意:只在Chrome、FireFox浏览器下有这个问题
解决方法:父元素不设置transform属性,或者子元素不使用fixed定位
移动端css样式兼容相关推荐
- PC端和移动APP端CSS样式初始化
CSS样式初始化分为PC端和移动APP端 1.PC端:使用Normalize.css Normalize.css是一种CSS reset的替代方案. 我们创造normalize.css有下面这几个目的 ...
- bootstrap和css样式兼容(ie、360、qq)不同浏览器的解决办法
一.作为一个之前没有真正实践项目的前端新手,这次在实践的时候就发现了一个严重的问题--兼容性. 开发者在前端开发,调试的时候,使用的基本都是谷歌.火狐这种开发者浏览器,忽略了其实我们国内主流的浏览器仍 ...
- 兼容ie6css怎么设置,CSS样式兼容IE6、IE7、IE8、FF火狐浏览器的方法
网页布局设计技术迄今为止主要有:table表格布局,DIV+CSS布局以及层布局.目前的网页布局设计领域主流是以DIV+CSS布局为主,table表格布局和层布局为辅.另外我还要告诉你一个秘密,那就是 ...
- php7 css样式不支持,div错位/解决IE6、IE7、IE8样式不兼容问题_html/css_WEB-ITnose
放到 标签下,然后为div指定一个类: 然后CSS这样设计: #container{ min-width: 600px; width:expression(document.body.clientW ...
- html左右滑轮标签,css样式支持左右滑动要点
div 包含 ul ,ul 包含 li div宽度固定,ul 宽度随着li的可以无限增加,li 左右滑动的最小容器. div 样式position:relative;width:xxpx;height ...
- 引入css样式属于链接式的是,(5)css样式导入
样式的组成 1.选择器:将样式与页面中的某一个或某些标签建立联系,就要使用选择器,在head标签下写一个style标签,将需控制参数的标签名写在这个style标签下,设置属性即可通过css来控制htm ...
- html上下滑动css样式,网页滚动条CSS样式
网页滚动条CSS样式 滚动条样式主要涉及到如下CSS属性: overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容 overflow: auto; 在需要时内容会自动添加滚动 ...
- HTML5基础知识,3D动画效果实现,定位,弹性布局以及CSS样式的设定,响应式,移动端
前端 HTML 超文本标记语言(超越文本) 网页 <html> 主体 <body> 头部 <head> 网页标题 <title> 段落 <p> ...
- 关于CSS样式浏览器兼容问题的一些注意事项
CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不 ...
最新文章
- vim显示行号、语法高亮、自动缩进的设置
- statsmodels 笔记:VAR
- 2021年10月到12月一个月学习总结2
- 河北二本计算机专业排名,河北省最好的二本财经类大学有哪些
- 手把手教你用杰奇建小说站
- 零基础学sql要多久_零基础小白如何迈出学习SQL的第一步?文科生学SQL的心得
- Java中的JsonConfig详解
- python21天打卡Day12--for循环,列表推导式-构建列表
- python用于标识类方法的是_Python类的设计与使用
- java毕业生设计校园租赁系统的设计与实现计算机源码+系统+mysql+调试部署+lw
- (基于matlab)蒙特卡罗法 之 布丰投针实验 (1/10)
- 32位计算机的内存限额,32位系统支持多大内存 如何完全使用32位4G内存
- 日本显示屏公司的尴尬:夏普被收购 JDI也岌岌可危
- mpeg1,mpeg2,mpeg4
- 华硕笔记本安装Ubuntu20.04
- 传奇人物李兴平5000万卖掉hao123后在做什么
- 怎么把应用隐藏到计算机里,怎么把桌面上的软件隐藏起来
- PV、UV、VV、IP是什么意思?
- [耀湾/微亚细亚] 夜降り萃梦乡 FIN.
- Senparc.Weixin.MP SDK 微信公众平台开发教程(十六):AccessToken自动管理机制
热门文章
- ce修改器怎么用 ce修改器使用基础教程
- 【EI检索-SPIE出版】第四届计算机科学与通信技术国际学术会议
- JavaScript设计模式——原型模式
- python 实现并行计算加快速度
- python秒表_使用Python创建秒表
- EOS区块链一周要闻回顾(2.17-2.23)
- pytorch torchvision 各种版本(包括ARM架构),python第三方库的whl下载地址
- Scala之——Implicit 详解
- JDBC遇到的ClassCastException问题
- VS2017 DLL中调用_beginthreadex创建线程