移动WEB开发之流式布局--移动端基础

news2025/7/19 6:24:16

浏览器现状

PC端常见浏览器

360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。

移动端常见浏览器

UC浏览器,QQ浏览器,欧朋浏览器, 百度手机浏览器,360安全浏览器,谷歌 浏览器,搜狗手机浏览器,猎豹浏览器 ,以及其他杂牌浏览器。

国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自主研发的内核,就像国内的手 机操作系统都是基于Android修改开发的一样。

总结:兼容移动端主流浏览器,处理Webkit内核浏览器即可。

手机屏幕现状

移动端设备屏幕尺寸非常多,碎片化严重。

Android设备有多种分辨率:480x800, 480x854, 540x960, 720x1280,1080x1920等,还有传说中的2K,4k屏。

近年来iPhone的碎片化也加剧了,其设备的主要分辨率有:640x960, 640x1136, 750x1334, 1242x2208等。

作为开发者无需关注这些分辨率,因为我们常用的尺寸单位是 px 。

常见移动端屏幕尺寸

注:以上数据均参考自How to Find Device Metrics for Any Screen - Material Design

注:作为前端开发,不建议大家去 纠结dp,dpi,pt,ppi等单位。 

移动端调试方法

Chrome DevTools(谷歌浏览器)的模拟手机调试

添加手机 

搭建本地web服务器,手机和服务器一个局域网内,通过手机访问服务器

使用外网服务器,直接IP或域名访问

总结

移动端浏览器我们主要对webkit内核进行兼容

我们现在开发的移动端主要针对手机端开发

现在移动端碎片化比较严重,分辨率和屏幕尺寸大小不一

学会用谷歌浏览器模拟手机界面以及调试

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/17391.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数学建模笔记

文章目录层次分析法——评价类问题原理代码插值算法原理代码拟合算法原理代码相关系数person 相关系数spearman 相关系数二分类和多分类二分类逻辑回归费希尔判别多分类Fisher判别聚类模型分析时间序列分析层次分析法——评价类问题 原理 1. 首先确定评价的目标,可…

智慧医院解决方案-最新全套文件

智慧医院解决方案-最新全套文件一、背景概述二、建设面临的挑战1、网络安全威胁2、关键业务宕机风险3、核心业务数据丢失风险三、总体建设架构四、建设方案五、获取 - 智慧医院全套最新解决方案合集一、背景概述 医院医疗信息化建设已走过两个阶段:第1阶段就是建立…

Java阻塞队列中的异类,SynchronousQueue底层实现原理剖析

上篇文章谈到BlockingQueue的使用场景,并重点分析了ArrayBlockingQueue的实现原理,了解到ArrayBlockingQueue底层是基于数组实现的阻塞队列。 但是BlockingQueue的实现类中,有一种阻塞队列比较特殊,就是SynchronousQueue&#xf…

mysql的服启动以及用户登录

目录 1.mysql的启动 A.使用电脑图形化界面打开 B.使用命令行 2.数据库的登录 A.使用命令行加密码直接登录 B.使用命令行再后面输入密码实现登录 C.访问同一台电脑上的不同数据库 D.访问其他主机上的数据库 E.退出mysql 1.mysql的启动 A.使用电脑图形化界面打开 在电脑当中…

Spring MVC面试题

什么是Spring MVC?简单介绍下你对Spring MVC的理解? SpringMVC是一个基于Java的实现了MVC设计模式的请求驱动类型的轻量级Web框架,把复杂的web应用分成逻辑清晰的表示层、控制层、业务层(服务层)、持久层,…

谈谈从DAMA、DCMM和DGI三大数据治理框架详细了解数据战略规划的关键要素

当前,数据作为新的生产要素提到了关键位置,众多组织认为数据是重要的战略资产。可是,如何发挥数据要素的生产力,数据资产又如何为企业创造价值,确有些无从下手。那么,这就是数据战略要解决的问题。企业怎么看待数据资产、数据的价值如何定位,对数据价值的期望是什么,数…

javaweb 之 会话技术 Cookie Session 登录注册案例 验证码

会话跟踪技术 会话:用户打开浏览器,访问web服务器的资源,会话建立,直到有一方断开连接,会话结束。在一次会话中可以包含多次请求和响应 会话跟踪:一种维护浏览器状态的方法,服务器需要识别多次…

《面试系列篇》——11种常用的设计模式

目录 【一】前言 【二】单例模式 2.1概念 2.2 饿汉模式 2.3 懒汉模式 多线程版本: 【三】简单工厂模式 【四】工厂方法模式 【五】抽象工厂模式 【六】策略模式 【七】装饰模式 7.1 定义 7.2 使用示例 【八】代理模式 8.1 定义 8.2 使用的优势 8.3…

【机器学习】岭回归和LASSO回归详解以及相关计算实例-加利福尼亚的房价数据集、红酒数据集

文章目录一,岭回归和LASSO回归1.1 多重共线性1.2 岭回归接手1.3 线性回归的漏洞(线性系数的矛盾解释)1.4 Ridge Regression1.5 岭回归实例(加利福尼亚的房价数据集)1.6 MSE1.7 LASSO1.8 Ridge岭回归和Lasso套索回归的比较1.9 Lass…

H5基本开发2——(HTML常见标签)

常见标签说明 <!DOCTYPE html> <html lang"zh-CN"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"> <meta http-equiv"X-UA-Compatible&q…

Elasticsearch安装

1.Linux下使用Elasticsearch 本教程所有操作均在CentOS 7.x环境下进行。 elasticsearch基于java进行开发&#xff0c;所以在运行elasticsearch之前需要安装jdk yum -y install java-1.8.0-openjdk 1.1.安装和配置 即将开始在centos 7 下安装Elasticsearch 1.1.1.新建一个用…

(四)QCustomPlot柱形图动态显示实例开发

系列文章目录 提示&#xff1a;这里是该系列文章的所有文章的目录 第一章&#xff1a; &#xff08;一&#xff09;QCustomPlot常见属性设置、多曲线绘制、动态曲线绘制、生成游标、矩形放大等功能实现 第二章&#xff1a; &#xff08;二&#xff09;QCustomPlot生成热力图/矩…

【数据结构与算法】递归全流程详细剖析 | 详解图的深度优先遍历

&#x1f680; 作者 &#xff1a;“大数据小禅” &#x1f680;文章简介&#xff1a;本篇文章属于数据结构与算法系列文章&#xff0c;这篇文章会对算法中的递归进行一个详细的介绍&#xff0c;不仅是概念&#xff0c;而是从运行过程中的每一步进行详细分析。并使用递归的方式来…

Vue3 - 使用 mitt.js 进行组件通信(兄弟关系)

前言 在 Vue2 中&#xff0c;两个同级&#xff08;兄弟关系&#xff09;的组件传递数据&#xff0c;都是利用一个叫 EventBus 事件总线&#xff0c;利用这根总线&#xff0c;可以让两个毫无关系的组件进行通信。 其实这个问题的本质核心解决方案&#xff0c;就一句话。通过第三…

开传奇需要什么技术要什么条件

开传奇需要什么技术要什么条件 对于这个问题&#xff0c;近期问的人比较多。这也是热爱传奇这个游戏的朋友会问到的一个问题&#xff0c;因为喜欢玩这个游戏&#xff0c;也想要自己去开一个经营一个 不管是电脑端还是手机端。但是对于一些新手确实不知道该如何开始操作从哪些方…

基于PHP+MySQL的校园二手旧书回收捐赠系统

校园内因为所教授的课程比较多,人数基数也比较大,所以每年都会产生大量的二手废旧图书,很多时候这些图书还可以进行二次利用,如果直接当废品进行回收很暴殄天物的,所以为了能够让这些校园内的二手图书得到更多的利用,我们开发了PHP校园二手旧书回收捐赠系统 本系统分为前台和后…

「Redis数据结构」压缩列表(ZipList)

「Redis数据结构」压缩列表&#xff08;ZipList&#xff09; 文章目录「Redis数据结构」压缩列表&#xff08;ZipList&#xff09;一、概述二、结构三、连锁更新问题四、压缩列表的缺陷五、小结参考ZipList 是一种特殊的“双端链表” &#xff0c;由一系列特殊编码的连续内存块…

基于协同过滤进行金融产品个性化推荐 代码+数据

1.案例简介 (1)方法概述: 本教程包含如下内容: 从原始的数据文件中加载数据,进行训练集和测试集的切分。 对数据分batch, 利用用户侧信息,和商品侧信息,进行双塔模型的训练 结果展示 (2)宏观流程图 (3)案例知识点 pytorch 视频CTR预估指标 博客point wise 以及 pair wise …

从0到1图文教你如何将spring boot项目部署到minikube中去

这里是weihubeats,觉得文章不错可以关注公众号小奏技术&#xff0c;文章首发。拒绝营销号&#xff0c;拒绝标题党 源码 本项目博文的源码已上传github&#xff0c;有需要自取 github: https://github.com/weihubeats/weihubeats_demos/tree/master/spring-boot-demos/spring-…

C#界面里Control.Enabled 属性的使用

C#界面里Control.Enabled 属性的使用 在开发中即使一个细节也可以决定成败。 前段时间刚好是毕业季,公司招聘了很多应界毕业生, 由于项目非常多,许多老手都已经分配到各个项目上去,还有一些小项目不得不让这些新生力军来接手。 这些初生牛犊不怕虎,天天加班,夜夜苦战…