移动端开发踩坑

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

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

.event{
    cursor:pointer;
}

 

移动端使用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

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

 

多行省略

　　单行省略比较简单

white-space:nowrap; 
text-overflow:ellipsis;
overflow:hidden;

 

　　合适WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览器

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;

 

　　line-clamp是控制显示的行数。这个属性不是css标准的内容。更多多行省略参考多行文本溢出显示省略号(…)全攻略

 

 

sumsung专区

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

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

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

 

webview中 sumsung定义高度不起作用

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

 

webview中 sumsung margin-left不起作用

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

 

IOS专区

 webview中 iso input宽度置为0还是有显示区域。解决方法是“width:0px;z-index:-1;border:none”。

 

 safari不支持YYYY-MM-DD这种带“-”的格式

 使用'/'：TIME_2019 = new Date('2019/01/01 00:00:00').getTime();

 

input的disabled强制样式 

ios的这个样式的边框/字体颜色是强制性的，不会被自定义样式覆盖。建议使用readonly来替代

 

　　推荐几篇博文：

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

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

　　

 　　相关文章：

　　 移动端点击问题