移动端制作中可能遇到的一些问题及解决方法

Posted 2020-09-17 墨.眉

在苹果设备中电话号码呈现蓝色且无法通过color修改：

解决方法：在页面加入meta标签。

<meta name="format-detection" content="telephone=no" />

移动端input无法获取焦点：

解决方法：放开阻止用户行为内容，可以为相应的元素添加以下样式。

-weblit-user-select:text;

在ios设备应用实际开发中，按钮可能采用input的type="button"来实现，此时为按钮设置的单色背景色通常呈现系统默认的渐变样式：

解决方法：放开阻止用户行为内容，可以为相应的元素添加以下样式。

 

-webkit-appearance:none;

 

-webkit-appearance是用来改变按钮和其他控件的外观，是其外观类似于原生控件：

input[type="button"],input[type="submit"],input[type="rest"]{
     -webkit-appearance:push-button;       //实现默认控件样式
     white-space:pre;   
}

 

组织长安图片之后呼出提示符纸行为：-webkit-ouch-callout:none；

禁止webkit内核浏览器的文字大小调整功能：-webkit-text-size-adjust:none；

避免点击a标签或click事件时产生高亮：-webkit-tap-highlight-color:rgba(0,0,0,0)；

禁止用户进行复制选择：-webkit-user-select:none；

如果不需要阻止用户选择内容可选择添加以下代码：

 

*{
     -webkit-user-select:text;
     -user-select:text
}
或者
*:not(inpu,textarea){
     -webkit-touch-callout:none;
     -webkit-user-select:none;
}

 

 

 

版权声明：本文为博主原创，未经博主允许不得转载。