程序员也需要下点成本啊！！IOS input渲染 和android不同，以及自动添加拨打电话功能导致的问题

标签：

前几天公众号做完了给领导审查，因为这个公众号是在之前的1.0基础上开发的，所以没有在意兼容性问题[其实是忽略了IOS=。=原谅我的无知]

结果出问题了，有几个问题：

1. input渲染效果和andriod下不同

2. 长串数字会被渲染成电话号码

3.四位小数被渲染成超链接

1.input

Android下设置没有圆角。无渐变，文字居中显示，完全没问题啊

到了IOS就变成这个鸟样子了！！这是什么鬼啊？？

原来iPhone上的safari解析input[type="submit"]和input[type="reset"]等按钮会以苹果浏览器的默认UI渲染。

OK，禁用掉就行了：

input[type="submit"], input[type="reset"], input[type="button"], button { -webkit-appearance: none;}

2.长串数字

然后遇到了第二个坑爹的东西 IOS会将长串数字识别为电话号码，还调用通讯录

我的部分代码是这样的

   　<div class="name">表名<%= name%></div>
　　<div class = "num">表号： 
　　　　<span><%=Address%></span>
　　　　<span><%= number %></span>
　　</div>

我想要获取num值 于是写了：

$(".num").children("span").eq(1).html()

然后我发现给了我一大堆乱七八糟的代码 大概意思就是IOS将这串数字渲染成了电话号码 并且添加了新的span节点在这串数字前面，因为我是用的eq(),所以悲剧了。。

解决办法当然还是禁用拨打电话功能

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

 如果需要拨打电话，就这么写

<a href="tel:15600000000">15600000000</a>

3.四位小数

第三个问题大概就是这样，我当时并没有找到好方法，而是直接取两位小数[因为这个是以前别人写的，估计也没有测试兼容性，而且四位小数的RMB什么鬼？]。所以没有试第二个问题的解决办法能不能解决这个问题。如果有人看到了并且知道正确的解决方法，请告诉我。。感谢！

其实我以前在看一本书的时候看到过一段话：

由于IOS模拟器只运行在Mac上，如果你使用Windows操作系统，那么最好也是唯一的选择就是购买iPhone来测试。

说的好像很有道理，我竟无言以对。。。

其实上面那些问题我在调试的时候都是借了同事一个不用的iphone来调试的啊！！！！

所以我难道要考虑入手一个iPhone了么？ QAQ

还好有模拟器

程序员也需要下点成本啊！！IOS input渲染 和android不同，以及自动添加拨打电话功能导致的问题

标签：

原文地址：http://www.cnblogs.com/timerain/p/5048820.html