![322a122f821a229e4ac06a7803300c5d.png](https://i-blog.csdnimg.cn/blog_migrate/57802ba16f2a82cdd274acdac8424aca.jpeg)
Native App (原生app)
需要下载安装,大型游戏使用,特点是分系统的。
>语言:Object C (IOS), Java (Android)
优势:性能好,速度快,能访问手机上的本地资源。
劣势:需要两个版本,开发成本、维护成本高,上线流程麻烦、周期长。
>页面存放在本地。
Web App
>移动站(移动网站)
>语言:HTML
>受限制于UIwebview,页面存放于服务器。
优势:开发成本低,更新快,跨平台。
劣势:用户体验相对差一点,不能使用本地资源,不能使用手机系统的功能。
Hybrid App (混合app)
>语言:Object C(IOS) + HTML
>受限制于UIwebview
同时具有Native App 和 Web App的优点。(半原生半web app)。
优势:可以跨平台,大多数新闻、电商型的app使用。
劣势:跟原生的app相比还是有一点差别,苹果商店对这种app的审核会越来越严格。
》前端移动端开发的就是能手写一个(web app)移动端的网站。
移动端样式重置
- webkit-user-select:none; 禁止用户选中文字,安卓无效(在事件那章解决,包括长按的时候会出现菜单,用阻止touchstart后的默认行为搞定)
- webkit-touch-callout:none; 禁止长按弹出系统菜单
- webkit-text-size-adjust:100%; 切换横竖屏或者用户自己通过浏览器设置的话,可以改变字体的大小(需要给body下的所有元素)
- webkit-tap-highlight-color:rgba(0, 0, 0, 0); 去除android下 a/button/input 标签被点击时产生的边框 & 去除ios下 a标签被点击时产生的半透明灰色背景
- webkit-appearance:none; 按钮在ios下都是圆角 (button与input都会有个默认背景)
- border-radius:0; input有个默认圆角
<style>
*{
margin: 0;
padding: 0;
}
body{
-webkit-user-select:none;
-webkit-touch-callout:none;
-webkit-text-size-adjust:100%;
}
a,button,input{
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}
button, input{
-webkit-appearance:none;
border-radius: 0;
}
input::-webkit-input-placeholder{
color: #000;
/* 默认的样式 */
}
input:focus::-webkit-input-placeholder{
color: red;
/* 点击后的样式 */
}
</style>
<p>理事会和解决</p>
<a href="#">wwwwww</a>
<button>aaa</button>
<input type="text" placeholder="ddddddddd">
- 修改placeholder 的样式:
input::-webkit-input-placeholder{
color: #000;
/* 默认的样式 */
}
input:focus::-webkit-input-placeholder{
color: red;
/* 点击后的样式 */
}
- 字体:
ios:默认中文字体是Heiti SC; 默认英文字体是Helvetica; 默认数字字体是HelveticaNeue; 无微软雅黑字体。
android:默认中文字体是Droidsansfallback; 默认英文字体是Droid Sans; 无微软雅黑字体。
一般设置为:font-family:helvetica;