ios与android适配处理

先写下我遇到并亲测的,其他待具体考证,可参考http://www.cnblogs.com/yangluoyiBlog/p/6415529.html

1、做IOS按钮button颜色的时候发现发白,和预期颜色不一样,这是因为IOS本身存在系统原生样式,这个时候需要css  来移除原生样式,其他值可参考http://www.css88.com/book/css/webkit/visual/appearance.htm

-webkit-appearance: none
-webkit-appearance取值代码效果介绍ChromeSafariiOS SafariAndroid Browser
none   去除系统默认appearance的样式,常用于IOS下移除原生样式 支持 支持 支持 支持
button   渲染成button的风格 支持 支持 支持 支持
button-bevel   渲染成button-bevel的风格 支持 支持 不支持 不支持
caret   渲染成caret的风格 支持 支持 不支持 不支持
checkbox   渲染input:checkbox样式的复选框按钮 支持 支持 支持 支持
listbox   渲染为listbox样式的复选框按钮 支持 支持 支持 支持
listitem   渲染成listitem的风格 支持 支持 不支持 不支持
media-fullscreen-button   渲染成media-fullscreen-button的风格 不支持 不支持 不支持 不支持
media-mute-button   渲染成media-mute-button的风格 支持 支持 不支持 不支持
media-seek-back-button   渲染成media-seek-back-button的风格 不支持 支持 不支持 不支持
media-seek-forward-button   渲染成media-seek-forward-button的风格 不支持 支持 不支持 不支持
media-slider   渲染成media-slider的风格 支持 支持 不支持 不支持

2、h5页面有个很蛋疼的问题就是,当输入框在最底部,点击软键盘后输入框会被遮挡。

//可采用如下方式解决
var oHeight = $(document).height(); //浏览器当前的高度
 $(window).resize(function(){ 
  if($(document).height() < oHeight){ 
        $("#footer").css("position","static"); 
  }else{ 
        $("#footer").css("position","absolute");
  } 
});

 3、Input 的placeholder会出现文本位置偏上的情况

input 的placeholder会出现文本位置偏上的情况:
PC端设置line-height等于height能够对齐,而移动端仍然是偏上,解决是设置line-height:normal;

  

posted @ 2017-05-08 22:44  hhXUE  阅读(1057)  评论(0编辑  收藏  举报