移动端开发遇到的几个问题

1.iPhone下非a标签使用$.fn.on委托绑定没有作用。

　　处理方案，给标签加上cursor属性

.event{
    cursor:pointer;
}

 

2.移动端使用iframe加载跨域网页出现“Refused to display in a frame becuase it set 'X-Frame-Options' to 'SAMEORIGIN”

　　本人使用的跨域页面是移动官网"http://wap.10086.cn/",如果使用pc地址"http://www.10086.cn/"则不会发生此问题。

　　原因：出于安全考虑，有的网站屏蔽了外部iframe的调用，比如上面的移动的移动端网页wap,而移动pc端则没有屏蔽。

　　解决方案：

　　在网上找解决方案，但是没有找到真正有用的。有几个方法被网友认为可行，但是我这里也没有用，详见http://stackoverflow.com/questions/20498831/refused-to-display-in-a-frame-because-it-set-x-frame-options-to-sameorigin

　　如果支持前端来说，这个应该是没有解决方案的，毕竟要访问的网页不是自己的。唯一的办法是让后台的同事帮忙使用默认浏览器打开这个网站。

 

3. webview中 sumsung手机使用margin-left:auto;margin-right:auto;来实现水平居中会导致该居中元素的宽度设置失效，宽度会自动填满居中区域。

　　解决方案：定位+左距离50%+左偏移元素宽度的一半

.center{
position:relative;
left:50%;
margin-left:-100px;
}

 

4.webview中 sumsung定义高度不起作用

　　解决方案：逼不得已使用padding撑起高度

 

5.webview中 sumsung margin-left不起作用

　　解决方案：逼不得已使用padding-left

 

 

　　推荐几篇博文：

　　移动端开发需要注意的一些事

　　移动前端的一些坑和解决方法（外观表现）