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

            

  • 相关阅读:
    保存ADO的记录集为XML文件
    [C++] Undefined reference to vtable
    Csdn博客的一个bug
    深入解析ATL(第二版ATL8.0)(1.111.13节)
    不同操作系统下记事本的换行符号
    dom4j学习总结(一)
    关于firefox的copy/paste的问题
    php URL编码解码函数
    php连接MySQL数据库的一些问题
    使用 jQuery progressBar 做文件上传的进度条指示
  • 原文地址:https://www.cnblogs.com/Shinigami/p/10827729.html
Copyright © 2011-2022 走看看