• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录

全栈高级工作者

  • 博客园
  • 联系
  • 订阅
  • 管理

公告

View Post

初学移动端

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

posted on 2019-05-22 08:29  1433223  阅读(123)  评论(0)    收藏  举报

刷新页面返回顶部
 
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3