webapp

web app

• native app 和web app 的异同？

  • native app (java/kotlin语言开发的安卓、ios系统):
  • 开发成本高；
  • 更新用户体验差、繁琐；
  • 酷炫的交互效果；
  • native app 被Apple认可；
  • web app：
  • 开发成本低；
  • 升级简单；
  • 易维护；

• 智能机、内置浏览器、内核是webkit，因此使用H5、C3实现UI；

  • webkit内核私有meta标签(在webapp开发时important)：

  <meta content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;” name=”viewport” />
  <meta content=”yes” name=”apple-mobile-web-app-capable” />
  <meta content=”black” name=”apple-mobile-web-app-status-bar-style” />
  <meta content=”telephone=no” name=”format-detection” />
  视口、允许全屏模式浏览、顶端状态条的样式、忽略将页面中的数字自动识别为电话号码

  • H5新标签的使用：header、section、aside…

  • 放弃CSS float属性；

  • 使用CSS3边框背景属性；

  • 块级化a标签；

  • 自适应布局，不要将宽高写死；

  • 学会使用webkit-box；

  • 去除Android平台对邮箱的自动识别：

  <meta content=”email=no” name=”format-detection” />

  • 如何去除Android和IOS的url控件条？setTimeout(scrollTo,0,0,0);放入window.onload()中，且内容高度高于设备height时生效；

  • 如何禁止用户旋转设备？不能…

  • IOS系统如何检测用户是否主屏启动webapp？navigator.standalone=true；

  • 如何关闭IOS中键盘自动大写？input元素的autocapitalize=”off”;

  • IOS如何禁止用户在新窗口中打开页面？禁止用户保存图片？webkit-touch-callout = “none”;

  • IOS禁止用户选中文字？webkit-user-select=”none”;

  • 如何获取滚动条的值？Android：document.scrollTop/Left; IOS：window.scrollX/Y;

  • 如何解决盒子边框溢出？webkit-box-sizing：border-box；

  • 如何解决边框圆角？webkit前缀、radius属性写在border属性后；

  • 页面自适应：meta:vp标签；

  • 如何解决IOS4.3对5位数字自动识别及添加样式？行内样式权重高；

  ​

  ​