zoukankan      html  css  js  c++  java
  • 移动端入门

    移动设备 :手机 (Mobile phone)  平板(ipad)

    移动设备系统:Android(安卓)、ios(苹果)

    内置浏览器: 安卓内置chrome(谷歌)浏览器 ,苹果内置safari浏览器,但他们两个的内核都是 webkit,因此无需考虑浏览器兼容性,但需要考虑安卓(Android)和ios的区别

    Android(安卓)、ios(苹果)在页面布局上需要考虑的因素:

      1.设备宽度(设备的实际大小或者说是设备 的分辨率)

      2.页面大小      开发者设计的大小

      3.浏览器的视口   浏览器窗口大小,可以用document.documentElement.clientWidth查看,在移动设备初始视口一般默认为980

      例如: 假若使用的是苹果5,分辨率为320*568,而设计的页面是1200px,浏览器的视口默认为980,浏览器的视口会自动缩小,以100%完整展示页面,就会变的不清楚,特别挤。我们需要把这三个变的统一

      方式:

        1.使移动设备(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" />

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

            

  • 相关阅读:
    Java学习--泛型
    java学习--自定义类的实例的大小比较和排序
    Java学习--枚举
    java学习--修饰符
    Java学习--变量
    POI--各种样式的XSSFCellStyle的生成
    POI 使用颜色字符串生成XSSFColor对象
    Others # 看到的一些創意 / 知乎不錯的提問/ Android安全
    RO # 不错站点
    Linux # Virtual Box VBoxGuestAdditions.iso
  • 原文地址:https://www.cnblogs.com/Shinigami/p/10827729.html
Copyright © 2011-2022 走看看