初学移动端

Posted jialaoshizaixianjiaoxue

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了初学移动端相关的知识,希望对你有一定的参考价值。

  1. 移动布局
    1.   移动设备 手机 和ipad
    2.   安卓系统 ios系统
    3.   安卓系统 内置浏览器是谷歌  ios内置 safari浏览器 他们的内核都是webkit,不考虑兼容性,需要考虑的是安卓和ios的区别。
  2. 布局
    1.   设备宽度  设备的实际大小 设备的分辨率 厂家给的
    2.   页面的大小  设计稿上的大小
    3.   浏览器的视口 浏览器自带的用document.documentElement.clientWidth查看,在移动设备上如果不做视口处理一般默认是980
    4.   例子 设备宽是320 页面宽是1200 浏览器视口是 980px 三种不统一,我们用移动设备看页面,浏览器的视口会自动缩小,以100%完整展示页面,就会变的不清楚,特别挤。我们需要把这三个变的统一。   
    5.   移动设备宽(320)和浏览器视口(980)宽一致,head之间加一个meta标签 name=”viewport”        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    6. 设备宽度和浏览器视口一致时 如果页面宽大于这个数字,就会出现滚动条。

    7. 当移动设备和浏览器视口一致时,如果还使用以前的布局,如果页面超过设备宽,超过的部分会被截掉。不能使用传统的页面开发模式了。

以上是关于初学移动端的主要内容,如果未能解决你的问题,请参考以下文章

07-移动端开发教程-移动端视口

移动端尺寸基础知识

移动端界面设计之尺寸篇

移动端开发基础环境配置

Insurance 项目——与移动端交互json-Gson

用vue写了个移动端车牌输入键盘