移动端布局介绍——css像素/物理像素/设备像素比

article/2025/9/29 5:30:55

我们在网页后台看到的不同手机的分辨率是:css像素,设备的独立像素;见下图的红色框里的东西:

如果我们把这个页面截图下来在属性里看它的分辨率,  如下图所示:

 发现这个分辨率其实是css分辨率的二倍,这个分辨率叫做物理分辨率,这个倍数关系不仅有二倍的,还有三倍的关系,这就引出了另一个概念:设备像素比(dpr)=物理像素/css像素

这不同的倍数,即设备像素比有2倍,三倍的关系,是根据不同的手机来的,不一样的手机设备像素比不一样。

问题解答:

(1)设计稿给的像素是css像素还是物理像素?

答:物理像素,因为物理像素可以压缩为小像素的css像素,但是小像素的css像素扩展成物理像素,就会失真;

(2)设计稿提供一份还是多份?

答:一份,有些人可能会问设计稿就一份,那不同的设备怎么能通用呢,所以我们要尽量用百分比、弹性盒布局或者是rem布局;

每次开头加载好的代码,红框里的meta代码含义是:名字为:视口;理想宽度=设备宽度;缩放比为1,含义就是不缩放了,见下图:

 


http://chatgpt.dhexx.cn/article/YNRVnF59.shtml

相关文章

CSS 中的像素(px)

CSS 中的像素(px) px 是一个我们经常在开发中使用的一个单元; 它表示在屏幕上展示的最小单元; 但是, 在 CSS 中像素可能和我们想象的不太一样. CSS 中的 px 是逻辑距离还是物理距离 答: 是逻辑距离; 像素(pixel)在浏览器中是一个表示距离的绝对单位(absolute unit); 同时,…

一文搞懂像素(px)、分辨率、CSS长度单位

博主目前在蚂蚁集团-体验技术部,AntV/S2 是博主所在团队的开源项目——多维交叉分析表格,欢迎使用,感谢到 S2 github 仓库点赞 star,有任何关于前端面试、就业、技术问题都可给在文章后留言。 对于做前端的朋友,相信看…

获取浏览器高度

获取浏览器高度 获取浏览器可视区域的高度 $(window).height(); //Cross browser gets the size of Visual area window,Have nothing to do with scroll bars /**** 仅获取可视区域的大小*/ var getInner(function() {// alert(typeof window.innerWidth ! undefined);if (…

js获取浏览器高度和宽度值(多浏览器)

IE中: document.body.clientWidth > BODY对象宽度 document.body.clientHeight > BODY对象高度 document.documentElement.clientWidth > 可见区域宽度 document.documentElement.clientHeight > 可见区域高度 FireFox中: document.bo…

JS 获取浏览器高度和宽度

JS获取浏览器高度和宽度 IE中: document.body.clientWidth > BODY对象宽度 document.body.clientHeight > BODY对象高度 document.documentElement.clientWidth > 可见区域宽度 document.documentElement.clientHeight > 可见区域高度 FireFox中&#x…

javascript获取浏览器宽度和高度

测试浏览器及版本&#xff1a;IE8、FF5、Chrome12 屏幕分辨率&#xff1a;1366 x 768 文档声明&#xff1a;<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ht…

Vue.js动态获取浏览器高度并进行实时修改DOM元素高度

项目中有高度自适应需求&#xff0c;div的高度始终需要一个浏览器的高度&#xff0c;在此做个记录&#xff0c;以便之后迅速搭建 <template> <div class"content" :style"contentStyleObj"></div> </template> <script> …

Vue,JS获取屏幕,浏览器高度宽度

Vue&#xff0c;JS获取屏幕&#xff0c;浏览器高度宽度 一、介绍 1. 容器 一个页面的展示&#xff0c;从外到内的容器为&#xff1a;屏幕、浏览器以及页面本身。 HTML元素展现在页面内&#xff0c;页面展现在浏览器内&#xff0c;而浏览器展现在屏幕内。 通过Js的一些对象…

JS -获取屏幕/浏览器高度

一、展示图 二、屏幕信息 window.screen.height&#xff1a;设备显示屏的高度 这个是设备显示屏的高度&#xff0c;各个机型的显示屏高度都不一样&#xff0c;可以在系统设置中看window.screen.availHeight&#xff1a;屏幕的可用高度 一般是显示屏高度减去显示屏工具栏的高度 …

【已解决】依赖包后出现Failed to resolve:com.github.xxx错误

【已解决】依赖包后出现Failed to resolve:com.github.xxx错误 问题 AndroidStudio常常需要引入第三方Library开源库&#xff0c;然后可能会遇到下面这样的问题&#xff1a; 原因 引入maven { url “xxx” }的时候&#xff0c;位置添加错了。 错误&#xff1a;添加到了bui…

webview添加参数与修改请求头的user-agent

前言 最近公司项目需求&#xff0c;在项目中嵌入h5页面&#xff0c;一般原生&#xff0c;看着感觉跟往常一样&#xff0c;一个地址就完全ok了&#xff0c;如果是这样那就没有这个博文的必要了&#xff01; 项目的登录使用的token登录&#xff0c;在移动端的登录是原生的&…

Android | 如何电脑调试APP中的webview 如何查看webview原web项目的console.log/控制台报错

目录 一、浏览器调试二、WebChromeClient onConsoleMessage()三、腾讯TBS Studio四、参考文献 最近一直在vueAndroid同时合作开发一个功能&#xff0c;我一个小小安卓开发迈向web开发真就处处是难关 一、浏览器调试 浏览器&#xff1a;chrome、Edge 说明&#xff1a;chrome是…

Android之 WebView的使用

一 简介 1.1 WebView是用来展示网页的控件&#xff0c;底层是google的WebKit的引擎。 比起苹果的WebView&#xff0c;webkit一些不足地方&#xff1a; 不能支持word等文件的预览纯标签加载&#xff0c;并不支持所有标签的加载不支持文件的下载&#xff0c;图片的放大&#xf…

Android:WebView 使用漏洞详解与解决方案

目录 1. 类型 WebView中&#xff0c;主要漏洞有三类&#xff1a; 任意代码执行漏洞密码明文存储漏洞域控制不严格漏洞 2. 具体分析 2.1 WebView 任意代码执行漏洞 出现该漏洞的原因有三个&#xff1a; WebView 中 addJavascriptInterface&#xff08;&#xff09; 接口WebVie…

android webview页面下方有input输入框,键盘弹起上滑无法拖动,导致输入内容也无法看到...

在手机端页面中有input输入框&#xff0c;输入框聚焦的时候会弹出键盘&#xff0c;如果input在页面的中下部&#xff0c;弹出的键盘会覆盖住input输入框&#xff0c;这个时候输入内容通常都是看不见的&#xff0c;用户看不到自己输入自己已经输入的内容这种体验非常的不好&…

Google上架因为WebView被拒

原因&#xff1a;在WebViewClient的回调方法onReceivedSslError里只单纯的写了handler.proceed();没给出明确的原因 两种解决方法&#xff1a; 1、去掉WebViewClient的回调方法onReceivedSslError 2、修改onReceivedSslError如下所示 Override public void onReceivedSslEr…

Android 使用Webview加载PDF文件

一、核心代码 protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_pdf_renderer);WebSettings webSettings weContainer.getSettings();webSettings.setJavaScriptEnabled(true);// 设置WebView是否允…

Android中解决ScrollView嵌套WebView底部留白太多和高度问题

前言&#xff1a; Android中WebView的坑很多&#xff0c;比如低版本内核不支持&#xff0c;加载速度慢&#xff0c;重定向等等&#xff0c;当使用ScrollView嵌套WebView时坑更多&#xff0c;有人说为啥要嵌套&#xff1f;单独使用WebView或者ScrollView不行吗&#xff1f;答案…

webview适配(一):文件选择,相机拍照,相册选择

说起来android适配webview就是比较烦人&#xff0c;本人遇到过很多坑&#xff0c;但是之前从来没有过记录&#xff0c;例如&#xff1a;文件选择框&#xff0c;toast弹框&#xff0c;视频不正常播放&#xff0c;视频各种不全屏&#xff08;网上说的方法都不行时候就崩溃了&…

Android跟web哪个好,比系统自带的WebView更好用 | AgentWeb

名称 AgentWeb 语言 Android 平台 GitHub 作者 Justson 在混合化开发大行其道的今天&#xff0c;安卓开发经常会用到WebView&#xff0c;用于加载网页。系统自带的WebView性能和流畅度都一般&#xff0c;今天给大家推荐一款第三方WebView&#xff0c;性能比系统自带的要好&…