当px单位在浏览器F12切换移动端显示时尺寸非常小的情况

最新推荐文章于 2024-10-10 20:59:20 发布

lemontree-xy

最新推荐文章于 2024-10-10 20:59:20 发布

阅读量204

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_43337481/article/details/133128947

版权

当px单位在浏览器F12切换移动端显示时尺寸非常小的情况，可以使用

移动端html标准视口模板，加在<head></head>里

<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

lemontree-xy

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

【白嫖党】如何把前端学好？看完这篇，直呼：太强了！（历经半个月之作）

超逸の学习技术博客

04-04

2万+

很少有文章做到将知识形成一个体系，于是需要翻阅很多资料，但这篇文章做到了！共34815字数。

F12移动端

x1037490413的博客

10-16

753

1 条评论您还未登录，请先登录后发表或查看评论

解决使用rem布局，vant组件样式变小的问题

tian6632的博客

06-28

2844

解决使用rem布局，vant等移动端组件会出现样式变小的问题，原因如下：（1）通常使用flexible.js（淘宝团队的移动端布局处理方式）就可以，当然使用其他的也是一样的。（1）因为两者使用的单位不一样，vant等使用的是单位，我们项目中使用的是解决使用rem布局，vant等移动端组件会出现样式变小的问题，解决方案如下：添加以下代码即：标签，是：里面的内容结果如图：...

css中，input和button设置了同样的height，实际高度不一样

Cheryl的加工厂

08-11

879

给input和button设置了同样的height，实际高度却不一样此时需要给input设置box-sizing: border-box; <div class="search-container" > <input type="text"> <button>搜索</button> </div> input { position: absolute; top:0; left: 0; height: 32px; width

小白玩转浏览器开发者工具—F12（超详细）

白白白鲤鱼的博客

08-04

2万+

浏览器F12开发者工具详解

移动端的打开方式,打开F12之后，就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box；定宽度为多少就是多少，代码库,移动端

weixin_54048131的博客

06-10

171

手机端设计，打开F12 就可以看自己手机端设计的样式，单独移动端页面（主流）三星浏览器的宽度响应式兼容PC端市场开发有单独制作和响应式开发两种方案 移动端浏览器基本以webkit内核为主，私有前缀添加webkit Down 传统的解决方案 border-box中css3盒子模型 box-sizing: border-box; box-sizing: content-box; 就是我们宽度+border+padding显示的样式

移动端适配之rem布局方案

h284306976的博客

03-25

739

一、设备的css像素是不同的 1. CSS像素（逻辑像素）可通过浏览器F12控制台查看不同机型的css像素，比如iPhone6为375px，iPhone6Plus为414px CSS中使用的一个抽象的概念，单位是px 值是相对的，并不是绝对的 2. 设备像素（物理像素）屏幕的物理像素，任何设备屏幕的物理像素的数量都是固定不变的，单位是pt（点）一般指的是手机的分辨率 1pt = 1/7...

移动端像素概念，viewport，适配

垂耳兔的博客

02-22

1654

想必大家对移动端像素的概念比较疑惑，总结一下我们经常会听到的几个词。一、屏幕尺寸平时我们通常提到手机的尺寸，比如iPhone6是4.7英寸的。手机的屏幕是以英寸为单位的。我们平时使用最多的单位是：毫米、厘米、米。对于英寸并不熟悉，首先我们先来换算一下单位：1英寸（inch）=2.54厘米（cm）。那么，英寸到底表示的是什么呢？是手机的宽还高？原来英寸代表的意思是：手机屏幕对角线的长度。常见的屏幕尺寸有：2.4、2.8、3.5、3.7、4.2、5.5、5.6等二、屏幕分辨率 ..

前端学习笔记 - 移动端Web开发

fengxm0309的博客

10-18

1104

移动端基础 浏览器现状 PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器 移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌 浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样兼容移动端主流浏览器，处理Webkit内核浏览器即可

前端移动端Swiper插件（使用方法）

weixin_72322475的博客

09-26

2442

前端移动端Swiper插件（使用方法）

chrome浏览器调试手机端h5页面

铁柱的博客

12-27

2万+

这个是常识性的问题了。奈何我之前确实是不知道。只知道用F12来调试PC端的页面，这次经过同事指点，终于知道为啥人家在浏览器调试手机端页面，显示的大小都是手机端的。步骤：1、打开F122、如果所示点击咱们平时寻找网页的DOM节点，都是用的第一个。第二个就是专门用来调整手机端页面的。先点击这个按钮。3、选择适配的手机型号按照2操作点击之后，我们可以看到这个界面。箭头的位置是一个下拉选

在手机端浏览器模拟F12（实用小工具）

阵雨的博客

11-28

2万+

大家可能会遇到一些谷歌浏览器模拟手机端没问题，但是真机上会出现的bug，真机上没有F12，很难定位bug原因。偶尔找到一款工具，可以方便的在手机端打开F12，记录一下分享给大家。这款工具就是vconsole，记录一下使用方法：一、多页面，用script的方式引入首先引入vconsole <script src="http://wechatfe.github.io/vcon...

（实用工具分享）网页尺寸测量工具Page Ruler

瓜冬瓜的博客

03-26

2万+

（实用工具分享）网页尺寸测量工具Page Ruler 所用浏览器：chrome 有时候需要测量一些网站布局的尺寸大小，可打开控制台点击旁边的小鼠标点击之后会进入一个模式，这时候你鼠标移动到页面的任何一个区域，网页上面都会自动显示区域的信息和尺寸（长*高）但是这个模式也有一个局限性，就是只会显示网页布局区域的信息，有时候你要测量如下一个红色区域的宽度，是做不到的这时候就需要这个工具的...

Chrome浏览器F12开发者工具的几个小技巧总结

最新发布

x737510的博客

10-10

512

HTTP（Hypertext Transfer Protocol）协议中的它们在用途和使用方式上有一些区别。用于请求服务器上的资源，通常是获取数据。GET 请求是幂等的，多次请求返回的结果应该是相同的，而且不应该对服务器产生任何副作用。用于向服务器提交数据，通常是提交表单数据或上传文件等。POST 请求可能对服务器产生副作用，例如在数据库中创建新的资源。数据通过 URL 参数传递，附在 URL 后面。因为数据在 URL 中可见，所以不适合传递敏感信息，且有长度限制。

快餐食品检测系统源码分享[一条龙教学YOLOV8标注好的数据集一键训练_70+全套改进创新点发刊_Web前端展示]

m0_73388125的博客

10-08

1378

数据集信息展示在本研究中，我们使用了名为“burger detection”的数据集，以改进YOLOv8在快餐食品检测系统中的表现。该数据集专门针对快餐食品的多样性进行设计，涵盖了六个主要类别，分别是：bbq、bread、bun、hotdog、pattty和patty。这些类别的选择不仅反映了快餐食品的常见种类，还考虑到了它们在实际应用中的重要性，尤其是在餐饮行业的食品识别和分类任务中。数据集的构建过程经过精心设计，确保每个类别的样本数量和质量都能满足深度学习模型训练的需求。

当浏览器窗口宽度在低于800px时，页面背景是红色

06-01

这个问题是关于响应式设计的。通常情况下，我们会使用 CSS 媒体查询来针对不同的屏幕尺寸设置不同的样式。如果你想要在浏览器窗口宽度低于 800px 时更改页面背景颜色为红色，可以使用以下 CSS 代码： ``` @media (max-width: 800px) { body { background-color: red; } } ``` 这里我们使用了 `@media` 媒体查询和 `max-width` 属性来判断浏览器窗口的宽度是否小于 800px。如果是，则将 `body` 元素的背景颜色设置为红色。