当前位置: 首页 > news >正文

【移动端网页布局】移动端网页布局基础概念 ① ( 移动端浏览器 | 移动端屏幕分辨率 | 移动端网页调试方法 )

文章目录

  • 一、移动端浏览器
  • 二、移动端屏幕分辨率
  • 三、移动端网页调试方法





一、移动端浏览器



移动端浏览器 比 PC 端浏览器发展要晚 , 使用的技术比较新 , 对 HTML5 + CSS3 支持较好 , 常见的浏览器如下 :

  • UC / QQ / Opera / Chrom / 360 / 百度 / 搜狗 / 猎豹

国内的浏览器 基本都是 根据 Webkit 内核进行修改而来的 , 目前没有自主研发的内核 , 因此 移动端开发适配比较简单 , 兼容主流的浏览器 , 即兼容 Webkit 内核浏览器即可 ;





二、移动端屏幕分辨率



移动设备的尺寸类型非常多 , Android / iOS 手机分辨率种类很多 , 参考

  • Android 屏幕适配 专栏 ;
  • 【Android 屏幕适配】屏幕适配基础概念 ① ( Android 与 iOS 屏幕宽高比种类 | 屏幕像素密度 DPI ) 博客 ;

在这里插入图片描述

前端开发时 , 不需要关注上述 屏幕像素密度 dpi , 密度无关像素 dp , 只需要关注 像素尺寸 px 即可 ;





三、移动端网页调试方法



使用 Chrom DevTools 谷歌浏览器开发工具 模拟手机调试 ; 使用 360 极速浏览器也可以使用该开发工具 ;

进入浏览器 , 输入网址 , 按下 F12 进入调试模式 , 点击工具中的 在这里插入图片描述 按钮 , 可以 切换到手机模式 ;

在这里插入图片描述

切换成手机模式 , 样式如下 :

在这里插入图片描述
左侧的下拉菜单 , 可以选择手机型号 ;

在这里插入图片描述

如果没有找到满意的手机型号 , 可以点击 Edit 按钮 , 添加虚拟设备 ;

在这里插入图片描述

最右侧的 在这里插入图片描述 按钮 , 可以旋转手机的横竖屏 , 下面是横屏样式 :

在这里插入图片描述

http://www.lryc.cn/news/61679.html

相关文章:

  • 无线洗地机哪款性价比高?高性价比的洗地机分享
  • 精通 Python OpenCV4:第三、四部分
  • 在现成的3D打印机上进行实验理论:一种数据孪生的攻击探测框架
  • 网络通信之传输层协议
  • 短视频app开发:如何提高视频播放稳定性
  • 软件测试,想找一份20k以上的工作需要掌握哪些知识?
  • PostgreSQL标准复制方案
  • AOD实践,modis数据下载,modis数据处理
  • 常见的注册中心Nacos、Eureka
  • 逆向思维书籍推荐
  • centos系统简析
  • 「SQL面试题库」 No_43 只出现一次的最大数字
  • TEB算法详解 参数详解
  • JavaSE学习进阶day05_03 泛型(进阶)
  • Flutter 布局探索 | 如何分析尺寸和约束
  • 01-Java基础知识面试题(2020最新版)
  • 同一台电脑管理多个ssh key
  • 《UVM实战》学习笔记——第七章 UVM中的寄存器模型2——期望值/镜像值、自动/显示预测、操作方式
  • OFDM-LS信道估计 MMSE信道估计公式推导
  • 业界内分布式锁
  • 基于Java+Springboot+Vue+elememt甜品屋蛋糕商城系统设计和实现
  • C/C++每日一练(20230424)
  • 三百左右的蓝牙耳机哪个音质好?三百左右音质最好的蓝牙耳机推荐
  • 把阿里大鸟花3个月时间整理的软件测试面经偷偷给室友,差点被他开除了···
  • 跳槽时的决策逻辑是什么?
  • vs2022下配置zxing cpp环境
  • 【linux】linux入门级别指令
  • Android 开发之核心技术点——性能优化篇(带面试题)~
  • typescript全局安装卸载以及npm相关问题
  • 一条SQL如何被MySQL架构中的各个组件操作执行的?