微信小程序pc端宽高：默认宽高为1024*812，全屏宽高为1920*1032

已于 2023-12-06 08:58:33 修改
阅读量2k 收藏 1
点赞数 2
文章标签： 微信小程序 小程序
于 2023-12-05 16:34:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42611074/article/details/134810865
版权

最近开发调试pc端小程序，想知道默认打开和全屏这两种情况下的小程序宽高，发现了一种方法：

真机运行pc端小程序，点击devTools

在这里插入图片描述

在控制台直接打印window对象，可以获取到pc端默认屏幕宽高为1024*812，全屏pc端小程序后屏幕宽高为1920*1032

在这里插入图片描述

然后开发者工具里自定义该大小的设备，调试页面样式

在这里插入图片描述

永远不会太晚
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小白学习微信小程序的页面布局和屏幕适配
2401_85258012的博客
06-13 380
在上面的示例中，我们使用@media规则设置了三个不同的屏幕宽度范围，并分别对应不同的样式。在上面的示例中，我们使用了一个容器组件view来作为页面的整体布局，它使用了flex布局，并设置了高度为100%。通过合理地使用组件和样式，以及灵活地应用屏幕适配技巧，我们可以实现不同大小屏幕上的页面布局和显示效果的统一。在上面的示例中，我们将容器的宽度和高度都设置为100%，然后将子元素的宽度和高度都设置为50%。在上面的示例中，我们将根元素的字体大小设置为16px，然后将容器的宽度设置为10rem。
微信小程序整个页面的自动适应布局的实现
11-20
按比例适应布局 大家有没有过一个烦恼，就是让某个view的高度或者宽度扩大点，而且是要按比例适应不同的手机，遇到这类问题应该怎么办？ 下面就为大家讲解怎么做一个能够自动适应不同手机的布局 1、像素单位 rpx 首先，我们来说说像素单位rpx，rpx是官方为小程序出的尺寸单位rpx(responsive pixel)，它可以根据屏幕宽度进行自适应。规定屏幕宽度为750rpx。所以平常我们应该尽量使用rpx来代替px 2、容器view的宽高使用百分百的方式 其次，我们来说说容器view的宽高应该尽量使用百分比的方式来写，下面我们来看看以下的示例： 首先来张显示图 注意：这里的满屏显示设置高度
微信小程序，PC端打开时，设置页面最大化和恢复功能
PsArvin的专栏
06-21 1635
文件用来对微信小程序进行全局配置：新增属性 "resizable": true,
小程序获取屏幕宽度
Acitylion的博客
08-02 5218
https://developers.weixin.qq.com/miniprogram/dev/api/base/system/system-info/wx.getSystemInfo.html 写在app.js里了 随时可以调用 onShow: function (options) { console.log("app-onShow"); let that = th...
微信小程序开发尺寸规范
m0_61396811的博客
10-03 2503
calc(360 / 360 * 750rpx)
微信小程序尺寸单位
buyue
07-11 1703
http://blog.csdn.net/qq_31383345/article/details/52817807 微信小程序 仿美团城市选择 城市切换
小程序的尺寸单位问题
weixin_34245082的博客
10-15 2471
开发小程序时对小程序怎么适配有疑惑，后来看官方文档想明白了，在此记录一下。 做小程序时，设计给的设计稿的尺寸是750*1334，以iphone6 为标准，屏幕尺寸是375px，此时1rpx = 0.5px； 小程序的官方文档中有写到： 从上边的图中可以看出，在不同的设备下，rpx换算成不同的px，意思就是在开发小程序时，只需要按照标准设计设置好尺寸（多少rpx），小程序会根据对应的设备，...
微信小程序调用当前页面的宽和高
月落星河
10-20 2725
在微信小程序中做轮播图的时候，需要获取当前的页面的宽度和高度。 首先在上面定义一个app的 获取 然后打开App.js App({ onLaunch: function () { // 展示本地存储能力 const that = this; var logs = wx.getStorageSync('logs') || [] logs.unshift(Date....
行人检测pos正样本，宽高为64*128，共15660个正样本！
12-24
本数据集提供了15660个这样的正样本，每个样本的尺寸被标准化为64像素宽、128像素高，这样的尺寸调整有助于加速计算过程并降低内存需求。 这些正样本的使用主要是为了训练行人检测模型。在训练过程中，模型会学习...
微信小程序 CSS filter（滤镜）的使用示例
03-29
有时我们的图片并不是同一个比例，但是我们需要设置图片保持一个固定的比例，在小程序里面因为宽度固定为750rpx,所以我们如果需要设置宽高比为2 : 1的话直接设置图片css的宽为一个固定值，然后高为固定值一半就行了...
微信小程序6位或多位验证码密码输入框功能的实现代码
08-27
首先，需要了解微信小程序的基本结构，包括wxml、js、wxss三个文件。wxml文件用于定义页面的结构，js文件用于编写逻辑代码，wxss文件用于定义样式。 下面是微信小程序6位或多位验证码密码输入框功能的实现代码： ...
【微信小程序】自适应Canvas 带跑马灯的辛运大转盘 内附代码和详解
04-22
这通常通过设置Canvas的宽高为屏幕的百分比或者使用微信小程序提供的`onResize`事件来动态调整Canvas尺寸。例如： ```javascript wx.getSystemInfo({ success: res => { this.canvasWidth = res.windowWidth; ...
微信小程序 canvas API详解及实例代码
09-01
微信小程序的Canvas API是开发者用来在小程序中进行图形绘制的重要工具。它允许开发者通过JavaScript代码在画布上绘制各种形状、图像以及实现复杂的图形动画。本文将深入解析微信小程序Canvas API的基本概念、常用...
微信小程序学习--基础--尺寸单位 rpx
keep moving
05-30 1547
rpx （responsive pixel）：是 WXSS 中引入新的尺寸单位，可以适配不同宽度的屏幕，规定屏幕宽为750rpx。相对px能保证在不同尺寸的手机屏幕内相对位置不偏移。rpx 与 px 之间的换算：换算基准：以375个物理像素为基准，即在一个宽度为375物理像素的屏幕下，1rpx=1px...
微信小程序开发--宽为百分百，页面仍可左右滑动
tianp576507773的博客
09-19 7646
　　这段时间小程序开发时，很多时候，希望内容充满整个屏幕（高度、宽度100%），如下图 　　 　　但是在设置 .followrecords-container{width:100%;} 后发现 手机在横向上虽然页面完全展示了，但是部分手机的页面却可以左右滑动(好像是溢出了一样，页面的右边总有一块白色区域)，这肯定不是我们需要的。你上下滑动是正常功能，如果是左右页面切换，能滑动也是正常的，但是你...
微信小程序中宽度显示为375.2的问题
ag456的博客
05-10 717
如图所示，当我们在微信小程序中定义width：100%时，会发现页面上显示宽度为375.2px，不必在意这些细节，这并不影响使用，如果你有强迫症，那就定义宽度等于750rpx即可。
微信小程序尺寸单位rpx以及样式相关介绍
zgphacker2010的专栏
07-29 3517
一.rpx单位 rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。 微信小程序也支持rem尺寸单位，rem和rpx的换算关系：rem: 规定屏幕宽度为20rem；1rem = (750/20)rpx 注：开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。 建议：设计稿.
有关Vue、微信小程序、UniApp中的CSS中的宽度width单位、自适应
最新发布
番茄Salad
11-22 2355
需要注意的是，在小程序中使用单位时，无需手动转换为实际像素值，小程序会自动根据屏幕密度进行换算。在小程序中设置宽度，无需手动换算为不同屏幕密度下的像素值。在小程序和UniApp开发中，推荐使用rpx单位来设置宽度和其他尺寸相关的样式。rpx单位可以实现在不同屏幕大小下的自适应效果，使页面在不同设备上呈现一致的布局和比例。）：类似于em，但是相对于字体中特定字符的高度或宽度。ex相对于小写字母x的高度，ch相对于数字0的宽度。需要根据具体情况选择合适的单位来设置宽度，以实现所需的效果。
用c 写一个高为2*n-1行的星号菱形
03-26
```c #include <stdio.h> int main() { int n, i, j; printf("请输入菱形的行数："); scanf("%d", &n); // 打印上半部分 for (i = 1; i <= n; i++) { for (j = n - i; j >= 1; j--) { printf(" "); } for (j = 1; j <= i * 2 - 1; j++) { printf("*"); } printf("\n"); } // 打印下半部分 for (i = n - 1; i >= 1; i--) { for (j = n - i; j >= 1; j--) { printf(" "); } for (j = 1; j <= i * 2 - 1; j++) { printf("*"); } printf("\n"); } return 0; } ``` 运行结果： ``` 请输入菱形的行数：5 * *** ***** ******* ********* ******* ***** *** * ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值