1.ios按钮点击 有黑色阴影
-webkit-tap-hightlight-color:rgba(0,0,0,0);//无色
2.输入框可以改变提示文字吗
.input::-webkit-input-placeholer {
color:'#xxxxxx'
}
3.关闭iOS首字母大小
<input autocapitalize='off'>
4.ios 禁用长按选择图片_h5移动端禁止长按图片保存
方法1
img {
pointer-events:none;
}
**方法2(全局设置)**
*{
user-select:none;//css3新增的属性,用于设置用户是否能够选中文本。
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-touch-callout:none; //禁止长按菜单 针对webkit内核的浏览器。 解决长时间按住页面闪退的现象?
}
5.rem与em区别
rem是更元素大小
首先:rem全称(font size of the root element)(根元素的字体大小)
它是css3新增的尺寸(度量单位),根节点(html)的font-size决定了rem的尺寸单位,也就是所它是一个相对的单位。
rem是一个相对长度单位。相对于父元素的倍数来计算。
浏览器默认字体大小是16px,1rem就是16px.
应用场景
可以用来做web app屏幕适配,因为不同手机型号的屏幕大小不同,所以这时候我们就不能用px(固定单位)
,rem是不同手机屏幕适配的一种方案。
em
首先 em是相对于父元素的字体大小来变化的
跟rem相比em有局限性,因为em只能相对父级文字大小变化,而rem是相对于根元素大小变化的。
vw、vh
vw(Viewport Width)、vh(Viewport Height)是基于视图窗口的单位,是css3的一部分,基于视图窗口的单位,
除了vw、vh还有vmin、vmax。
vw:1vw 等于视口宽度的1%
Vh:1vh 等于视口高度的1%
vmin: 选取 vw 和 vh 中最小的那个,即在手机竖屏时,1vmin=1vw
vmax:选取 vw 和 vh 中最大的那个 ,即在手机竖屏时,1vmax=1vh
6.响应式图片
在移动端中,图片的处理应该是很谨慎的。假设有一张图片本身的尺寸是X宽,设置和包裹它的div一样宽,
如果是div宽度小于图片宽度没有问题,
但是如果div宽度大于图片的宽度,图片则会被拉伸失真
解决方法:让图片最大只能是自己的宽度
img {
max-width: 100%;
display: block;
margin: 0 auto;
}
7.phone及ipad下输入框默认内阴影
input{
-webkit-appearance:none;
}
8.如何解决iOS设置中 input按钮样式会被默认样式覆盖的问题?
input,
textarea {
border:0;
-webkit-appearance:none;
}
9.如何防止手机中页面放大和缩小?
10.pc端与移动端字体大小的问题/在旋转屏幕时,如何解决字体大小自动调整的问题
html{
-webkit-text-size-adjust:100%;
}
11.如何解决 Android手机圆角失效问题?
通过 background-clip:padding-box为失效的元素设置样式。
12.如何通过HTML5调用 Android或iOS的拨号功能?
< a href="te1:021-12345678">单击拨打021-12345678</a>
13.移动端适配
弹性布局(Flexbox)
媒体查询
Rem与Viewport单位(px to ren)
uniapp使用
14.如何解决上下拉动滚动条时出现卡顿的现象?
body {
-webkit-overflow-scrolling:touch;
overflow-scrolling:touch;
}