移动端一些注意事项

谁借莪１个温暖的怀抱￠ 2022-06-04 08:05 257阅读 0赞

width 设置layout viewport 的宽度，为一个正整数，使用字符串”width-device”表示设备宽度  
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数  
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数  
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数  
height 设置layout viewport 的高度，这个属性对我们并不重要，很少使用  
user-scalable 是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许

这meta的作用就是删除默认的苹果工具栏和菜单栏。

作用是控制状态栏显示样式

winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉

关闭iOS键盘首字母自动大写

禁止文本缩放

html {
    -webkit-text-size-adjust: 100%;
    }

移动端如何清除输入框内阴影

input,
    textarea {
    border: 0;
    -webkit-appearance: none;
    }

忽略页面的数字为电话，忽略email识别

快速回弹滚动

{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    }

移动端禁止选中内容

-webkit-user-select: none;

移动端取消touch高亮效果

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

如何禁止保存或拷贝图像

img {
    -webkit-touch-callout: none;
    }

PS：需要注意的是，该方法只在 iOS 上有效。  
  
  
设置input里面placeholder字体的大小  
::-webkit-input-placeholder\{ font-size:10pt;\}  
  
  
input\[type=input\]\{-webkit-appearance:none;\}移除ios的样式，但这个属性存在bug，会导致iso无法获取checkbox值，给这个元素重新赋上input\[type=checkbox\]\{-webkit-appearance:checkbox;\}就不会报错了。  
  
  
消除transition闪屏  
.css\{  
\-webkit-transform-style: preserve-3d;  
\-webkit-backface-visibility: hidden;  
\}