首页 / 知识

HTML5 移动开发入门知识点分享

2023-04-11 13:53:00

　　1、先来看淘宝无线wiki要求在页面中添加的meta标签。

　　第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开，如果不规范将不会起作用。

　　第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；

　　第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；另有default（白色），black-translucent（灰色半透明）；

　　第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码;

　　第五个meta标签表示：判断页面是否在本地Native（本地APP）环境中；

　　2.放弃float

　　使用display：inline-block属性代替；因为float不适用于反向停靠和无法接受水平间隙；

　　3.大胆使用HTML5和CSS3

　　因为这些高端智能手机（Iphone、Android）的内置浏览器都是基于webkit内核的；

　　4.使用自适应模式布局

　　apple webapp api已经明确说明了：我们为了让用户在safari中正常的浏览网页，我们必须保证用户的设备处于任何一个方位时，safari都能够正常的显示网页内容（也就是自适应），所以我们禁止开发者阻止浏览器的orientationchange事件；在Android平台，虽然没有那个文档说明，确实也是无法阻止此事件的。所以自使用布局模式十分必要，而且自适应之后也不用考虑分辨率的问题。

　　5.学会使用webkit-box

　　称之为：流体盒模型，这是一种自适应的解决方案。

　　比较常用的是前三个，当然还有display:-webkit-box;

　　6.隐藏IOS和Android上输入URL的控件条

　　你的老板或者PD或者交互设计师可能会要求你：能否让我们的webapp更加像nativeapp，我不想让用户看见那个输入url的控件条？

　　答案是可以做到的。我们可以利用一句简单的javascript代码来实现这个效果-->setTimeout（function（）{ window.scrollTo（0, 1）; },0）;

　　请注意，这句代码必须放在window.onload里才能够正常的工作，而且你的当前文档的内容高度必须是高于窗口的高度时，这句代码才能有效的执行。

　　7.如何检测用户是通过主屏启动你的webapp

　　看过Apple webapp API的同学都知道iOS为safari提供了一个将当前页面添加主屏的功能，按下 iphoneipodipod touch底部工具中的小加号，或者ipad顶部左侧的小加号，就可以将当前的页面添加到设备的主屏，在设备的主屏会自动增加一个当前页面的启动图标，点击该启动图标就可以快速、便捷的启动你的webapp。从主屏启动的webapp和浏览器访问你的webapp最大的区别是它清除了浏览器上方和下方的工具条，这样你的webapp就更加像是nativeapp了，还有一个区别是window对像中的navigator子对象的一个standalone属性。iOS中浏览器直接访问站点时，navigator.standalone为false,从主屏启动webapp 时，navigator.standalone为true，我们可以通过navigator.standalone这个属性获知用户当前是否是从主屏访问我们的webapp的。在Android中从来没有添加到主屏这回事！

　　8.如何关闭iOS中键盘自动大写

　　我们知道在iOS中，当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的，根据某些业务场景，可能我们需要关闭这个功能，移动版本webkit为 input元素提供了autocapitalize属性，通过指定autocapitalize=”off”来关闭键盘默认首字母大写。

　　9.iOS中如何彻底禁止用户在新窗口打开页面

　　有时我们可能需要禁止用户在新窗口打开页面，我们可以使用a标签的target=”_self“来指定用户在新窗口打开，或者target属性保持空，但是你会发现iOS的用户在这个链接的上方长按3秒钟后，iOS会弹出一个列表按钮，用户通过这些按钮仍然可以在新窗口打开页面，这样的话，开发者指定的 target属性就失效了，但是可以通过指定当前元素的-webkit-touch-callout样式属性为none来禁止iOS弹出这些按钮。这个技巧仅适用iOS对于Android平台则无效。

　　10.iOS中如何禁止用户保存图片＼复制图片

　　我们在第13条技巧中提到元素的-webkit-touch-callout属性，同样为一个img标签指定-webkit-touch-callout为none也会禁止设备弹出列表按钮，这样用户就无法保存＼复制你的图片了。

　　11.iOS中如何禁止用户选中文字

　　我们通过指定文字标签的-webkit-user-select属性为none便可以禁止iOS用户选中文字。

　　12.iOS中如何获取滚动条的值

　　桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的，但在iOS中你会发现这两？个属性是未定义的，为什么呢？因为在iOS中没有滚动条的概念，在Android中通过这两个属性可以正常获取到滚动条的值，那么在iOS中我们该如何获？取滚动条的值呢？

　　通过window.scrollY和window.scrollX我们可以得到当前窗口的y轴和x轴滚动条的值。

　　13.如何解决盒子边框溢出

　　当你指定了一个块级元素时，并且为其定义了边框，设置了其宽度为100％。在移动设备开发过程中我们通常会对文本框定义为宽度100％，将其定义为块级元？素以实现全屏自适应的样式，但此时你会发现，该元素的边框（左右）各1个像素会溢了文档，导致出现横向滚动条，为解决这一问题，我们可以为其添加一个特殊？的样式-webkit-box-sizing:border-box;用来指定该盒子的大小包括边框的宽度。

　　14.如何解决Android?2.0以下平台中圆角的问题

　　如果大家够细心的话，在做wap站点开发时，大家应该会发现android?2.0以下的平台中问题特别的多，比如说边框圆角这个问题吧。

　　在对一个元素定义圆角时，为完全兼容android?2.0以下的平台，我们必须要按照以下技巧来定义边框圆角：

　　1＼-webkit这个前缀必须要加上（在iOS中，你可以不加，但android中一定要加）；

　　2＼如果对针对边框做样式定义，比如border:1px?solid?#000;那么-webkit-border-radius这属性必须要出现在border属性后。

　　3＼假如我们有这样的视觉元素，左上角和右上角是圆角时，我们必须要先定义全局的（4个角的圆角值）-webkit-border-?radius:5px;然后再依次的覆盖左下角和右下角，-webkit-border-bottom-left-radius:0;-webkit-?border-bottom-right-border:0;否则在android?2.0以下的平台中将全部显示直角，还有记住！-webkit这个前？缀一定要加上！

　　15.如何解决iOS 4.3版本中safari对页面中5位数字的自动识别和自动添加样式

　　新的iOS系统也就是4.3版本，升级后对safari造成了一个bug：即使你添加了如下的meta标签，safari仍然会对页面中的5位连续的数字进行自动识别，并且将其重新渲染样式，也就是说你的css对该标签是无效的。

　　<meta?name=”format-detection”？content=”telphone=no”？/>

　　我们可以用一个比较龌龊的办法来解决。比如说支付宝wap站点中显示金额的标签，我们都做了如下改写：

　　<button?class=”t-balance”style=”background:none;padding:0;border:0;”>95009.00</button>元 .

　　16.新增事件

　　touch事件替代了PC端的mouse事件，需要注意的就是touchmove!=mousemove,应该是touchmove==mousemove+mousedown;

　　17.link

　　18.屏幕旋转事件

　　19.双手滑动事件

　　20.判断是否为iphone

　　21.localStorage