处理移动端的常见的兼容性问题的问题都有什么？

来源：蜘蛛抓取(WebSpider) 时间：2019-10-08 06:20 标签： 常见的兼容性问题

IOS下按钮等默认样式问题描述IOS下的按钮会自动加圆角加颜色渐变，搜索类型按钮会自动加圆角解决办法input{-webkit-appearance:?none;} 通过媒体查询进行屏幕适配问题描述移动开发面对的屏幕尺寸那叫┅个丰富其中安卓阵营就够让人头痛的。解决办法弹性盒子布局问题描述完成如下效果形成多列布局，并且多屏幕适配解决办法使用盒子布局父元素：display:-webkit-box子元素：-webkit-box-flex:1竖屏转横屏文字变大问题描述当竖屏的屏的时候显示效果不错但是当横屏的时候，字体会变大无论你怎么設置字体大小都无效解决办法禁止自动调整-webkit-text-size-adjust:none盒子边框溢出问题描述当我们指定了一个块级元素时，并且为其定义了边框设置了其宽度为100％。按照盒子模型就会发现该元素的左右边框各1个像素会溢了，导致出现横向滚动条解决办法指定盒子的大小包括边框的宽度-webkit-box-sizing:border-boxIOS长按链接彈出对话框问题描述在项目开发中有时我们需要某个链接在当前页面打开，这样需要禁止用户在新窗口打开页面我们可以使用a标签的target=”_self”指定在当前页面打开，但是在iOS中长按链接一段时间后系统会弹出一个对话框，用户可以通过点击”在新页面中打开”来在新窗口打開页面这样我们指定的target属性就失效了解决办法可以通过指定当前元素的-webkit-touch-callout属性为none来禁止iOS弹出这些按钮placeholder中的文字不垂直居中问题描述在安卓等移动浏览器中placeholder中的文字不垂直居中问题左边是Chrome调试的效果，也就是说在Chrome是没有问题的；右边是在一台安卓手机的浏览器中的效果解决办法line-height:?normal;?/*?for?non-ie?*/??line-height:?22px\9;?/*?for?ie?*/??input::-webkit-input-placeholder?{?/*?WebKit?browsers?*/??line-height:?1.5em;}input:-moz-placeholder?{?/*?Mozilla?Fi

所有组件尤其是表单能否对移動端兼容性更友好点，用layui做后台管理系统的话有移动端管理需求。

另外Ant Design的组件比较齐全，有一些很方便的功能有空其实可以参考一丅评估要不要加到layui中。

我要回帖

更多关于 常见的兼容性问题 的文章

 

随机推荐