手机端问题
8、如何去除Android平台中对邮箱地址的识别 缓存控制 <metahttp-equiv="Cache-Control"content="no-cache"/> <metahttp-equiv="Cache-Control"content="max-age=300"/> 下面这行: <metahttp-equiv="Cache-Control"content="max-age=0"/> 与下面一行有相同的效果: <metahttp-equiv="Cache-Control"content="no-cache"/> 某些WAP浏览器不支持用<meta/>标签来控制缓存,但它们确实知道HTTP头"Cache-Control:no-cache"的意思.这种情况下,解决方案是在服务器端的HTTP响应中设置HTTP头. HTTP刷新 <metahttp-equiv="Cache-Control"content="no-cache"/> <metahttp-equiv="refresh"content="15"/> 注意的是这个XHTMLMP例子中需要<metahttp-equiv="Cache-Control" content="no-cache"/>.如果上述代码没被包含,WAP浏览器将仅仅显示缓存中的文档的复本, 而不需要每次刷新都连接服务器. <metahttp-equiv="refresh"content="15;URL=hello_world_example1.xhtml"/> 某些WAP浏览器是不支持HTTP刷新的.例如,HTTP刷新在Openwave移动浏览器6.2.2版上运行良好, 但在Nokia移动浏览器4.0版,SonyEricssonT610和T68i移动电话模拟器上是不起作用的. 注释 <metaname="author"content="mark"/> clearType字体 <METAHTTP-EQIV="cleartype"CONTENT="ON|OFF"> 定义页面尺寸 IE的使用:<METANAME="MobileOptimized"CONTENT="240"> google搜索中知道这个可以解决flash不能全屏的问题,自己没遇到过。 其他使用:<metaid="viewport"name="viewport"content="width=320;initial-scale=1.0;maximum-scale=1.0;user-scalable=0;"/> 看过iOSwebappAPI的同学都知道iOS提供了一个meta标签:用于禁用iOS对页面中电话号码的自动识 别。在iOS中是不自动识别邮件地址的，但在Android平台，它会自动检测邮件地址，当用户tou ch到这个邮件地址时，Android会弹出一个框提示用户发送邮件，如果你不想Android自动识别页面中 的邮件地址，你不妨加上这样一句meta标签在head中<metacontent="email=no"name="format-detec tion"/> 9、如何去除iOS和Android中的输入URL的控件条 你的老板或者PD或者交互设计师可能会要求你：能否让我们的webapp更加像nativeapp，我不想让用户 看见那个输入url的控件条？ 答案是可以做到的。我们可以利用一句简单的javascript代码来实现这个效果 setTimeout(scrollTo,0,0,0); 请注意，这句代码必须放在window.onload里才能够正常的工作，而且你的当前文档的内容高度必 须是高于窗口的高度时，这句代码才能有效的执行。 10、如何禁止用户旋转设备 我曾经也想禁止用户旋转设备，也想实现像某些客户端那样：只能在肖像模式或景观模式下才能正 常运行。但现在我可以很负责任的告诉你：别想了!在移动版的webkit中做不到！ 至少ApplewebappAPI已经说到了：我们为了让用户在safari中正常的浏览网页，我们必须保证 用户的设备处于任何一个方位时，safari都能够正常的显示网页内容（也就是自适应），所以我们 禁止开发者阻止浏览器的orientationchange事件，看来苹果公司的出发点是正确的，苹果确实不是一 般的苹果。iOS已经禁止开发者阻止orientationchange事件，那Android呢？对不起，我没有找到任何 资料说Android禁止开发者阻止浏览器orientationchange事件，但是在Android平台，确实也是阻止 不了的。 11、如何检测用户是通过主屏启动你的webapp 看过ApplewebappAPI的同学都知道iOS为safari提供了一个将当前页面添加主屏的功能，按下iphone ipodipodtouch底部工具中的小加号，或者ipad顶部左侧的小加号，就可以将当前的页面添加到设备 的主屏，在设备的主屏会自动增加一个当前页面的启动图标，点击该启动图标就可以快速、便捷的启动 你的webapp。从主屏启动的webapp和浏览器访问你的webapp最大的区别是它清除了浏览器上方和下方 的工具条，这样你的webapp就更加像是nativeapp了，还有一个区别是window对像中的navigator子对 象的一个standalone属性。iOS中浏览器直接访问站点时，navigator.standalone为false,从主屏启动 webapp时，navigator.standalone为true，我们可以通过navigator.standalone这个属性获知用户当前 是否是从主屏访问我们的webapp的。在Android中从来没有添加到主屏这回事！ 12、如何关闭iOS中键盘自动大写 我们知道在iOS中，当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的，根据某些 业务场景，可能我们需要关闭这个功能，移动版本webkit为input元素提供了autocapitalize， 通过指定autocapitalize="off"来关闭键盘默认首字母大写。 13、iOS中如何彻底禁止用户在新窗口打开页面 有时我们可能需要禁止用户在新窗口打开页面，我们可以使用a标签的target="_self"来指定用户在新窗 口打开，或者target属性保持空，但是你会发现iOS的用户在这个链接的上方长按3秒钟后，iOS会弹出 一个列表按钮，用户通过这些按钮仍然可以在新窗口打开页面，这样的话，开发者指定的target属性就 失效了，但是可以通过指定当前元素的-webkit-touch-callout样式属性为none来禁止iOS弹出这些按钮 。这个技巧仅适用iOS对于Android平台则无效。 14、iOS中如何禁止用户保存图片＼复制图片 我们在第13条技巧中提到元素的-webkit-touch-callout属性，同样为一个img标签指定-webkit-t ouch-callout:none，这样用户就无法保存＼复制你的图片了。 15、iOS中如何禁止用户选中文字 我们通过指定文字标签的-webkit-user-select:none便可以禁止iOS用户选中文字。 16、iOS中如何获取滚动条的值 桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的，但在iO S中你会发现这两个属性是未定义的，为什么呢？因为在iOS中没有滚动条的概念，在Android中通过 这两个属性可以正常获取到滚动条的值，那么在iOS中我们该如何获取滚动条的值呢？ 通过window.scrollY和window.scrollX我们可以得到当前窗口的y轴和x轴滚动条的值。 17、如何解决盒子边框溢出 当你指定了一个块级元素时，并且为其定义了边框，设置了其宽度为100％。在移动设备开发过程中我 们通常会对文本框定义为宽度100％，将其定义为块级元素以实现全屏自适应的样式，但此时你会发现， 该元素的边框(左右)各1个像素会溢了文档，导致出现横向滚动条，为解决这一问题，我们可以为其添加 一个特殊的样式-webkit-box-sizing:border-box;用来指定该盒子的大小包括边框的宽度。 18、如何解决Android2.0以下平台中圆角的问题 如果大家够细心的话，在做wap站点开发时，大家应该会发现android2.0以下的平台中问题特别的多， 比如说边框圆角这个问题吧。在对一个元素定义圆角时，为完全兼容android2.0以下的平台，我们必 须要按照以下技巧来定义边框圆角：-webkit这个前缀必须要加上（在iOS中，你可以不加，但android中 一定要加）；如果对针对边框做样式定义，比如border:1pxsolid#000;那么-webkit-border-radius这 属性必须要出现在border属性后。假如我们有这样的视觉元素，左上角和右上角是圆角时，我 们必须要先定义全局的(4个角的圆角值)-webkit-border-radius:5px;然后再依次的覆盖左下角和右下角 ，-webkit-border-bottom-left-radius:0;-webkit-border-bottom-right-border:0;否 则在android2.0以下的平台中将全部显示直角，还有记住！-webkit这个前缀一定要加上！ 19、如何解决android平台中页面无法自适应 虽然你的html和css都是完全自适应的，但有一天如果你发现你的页面在android中显示的并不是自适 应的时候，首先请你确认你的head标签中是否包含以下meta标签：<metaname="viewport"content=" width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;"/>如果有的话，那请 你再仔细的看清楚有没有这个属性的值width=device-width，如果没有请立即加上吧！ 20、如何解决iOS4.3版本中safari对页面中5位数字的自动识别和自动添加样式 新的iOS系统也就是4.3版本，升级后对safari造成了一个bug：即使你添加了如下的meta标签，sa fari仍然会对页面中的5位连续的数字进行自动识别，并且将其重新渲染样式，也就是说 你的css对该标签是无效的。<metaname="format-detection"content="telphone=no"/>我们可以用 一个比较龌龊的办法来解决。比如说支付宝wap站点中显示金额的标签，我们都做了如下改写： <buttonclass="t-balance"style="background:none;padding:0;border:0;">95009.00</button> 本文转自Ansue 51CTO博客，原文链接：http://blog.51cto.com/ansue/1653511，如需转载请自行联系原作者
