移动端ios系统onload事件失效_复习之移动端app介绍

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;