小程序和移动端100vh的区别

最新推荐文章于 2024-04-28 18:05:27 发布
最新推荐文章于 2024-04-28 18:05:27 发布
阅读量407 收藏 1
点赞数
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51528868/article/details/135038516
版权

在小程序中如果配置了系统自带的导航栏和tabBar，小程序的100vh它会自动减去系统配置的导航栏和tabBar的高度，只显示中间的部分的高度

  小程序可以通过

     "navigationStyle":"custom" 去除系统自带的导航栏

     "custom":true   去除系统自带的tabBar

而浏览器，因为浏览器没有系统自带的导航栏和tabBar，所以浏览器的100vh没有减去导航栏和tabBar的高度

柠檬树^-^
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序rpx、px、vw、vh、upx区别
qq_29707325的博客
07-07 285
upx是uni-app中的长度单位，它代表设备独立像素（与屏幕密度无关），1upx等于设备上的1个物理像素。在不同分辨率和屏幕尺寸的设备上，upx会自动转换为适应当前屏幕的最佳物理像素值，帮助开发者实现跨设备的一致性布局。如果不进行任何适配处理，使用px单位的元素在不同设备上可能会因为屏幕像素密度（PPI）的差异而显示出不同的大小。对于不需要响应式布局的元素，或者在已知屏幕尺寸和分辨率的情况下，使用px单位是合适的。在微信小程序中，使用px作为单位时，元素的尺寸会直接对应到屏幕的物理像素上。
小程序设置height:100vh导致页面超出屏幕可以上下滑动
me_reader的博客
05-27 1428
在手机上测试的时候页面可以上滑且出现一条白色的线条。给页面添加`position: fixed`
H5浏览器上使用100vh的坑及解决办法
最新发布
sunnyjingqi的博客
04-28 866
近期开发一个移动端的详情页，布局是有一排操作按钮固定在页面底部，中间内容部分在页面内总想滚动，开发时我把页面中间部分的高度设置为100vh - 50px，overflow：auto；在浏览器的控制台模式看没问题，微信上的浏览器和小程序看这个页面也没问题，最后突然发现在安卓和苹果手机的浏览器上展示有问题，具体表现为：安卓（华为mate60）：页面展示地址栏和底部导航栏时，看不到操作按钮，当页面滚动时顶部地址栏隐藏，底部的操作按钮被滚动上来了。
移动适配---em、rem 、 vw / vh的原理以及小程序的 rpx
weixin_43323097的博客
08-19 1303
em、rem 、 vw / vh、rpx
【无标题】 移动端解决高度设为100vh时，页面超出窗口问题
qq_61834864的博客
10-31 5399
移动端解决高度设为100vh时，页面超出窗口，会产生滚动条问题
微信小程序布局中的单位及使用：px、rem、rpx、vw、vh、n%
qq_44577070的博客
11-24 9201
没接触过 JavaScript、CSS、HTML的小白直接开始接触微信小程序的开发，在了解了各个部分的作用以后，布局的时候就发现：怎么这么多单位？？？ px、rem、rpx、vw、vh、n% 为了不总是用得一脸懵逼，还是花点时间去好好归纳一下。 px：就是 Pixel 的缩写，就是指像素，图片采样的基本单位。 rem：把页面按比例分割达到自适应的效果。规定屏幕宽度为 20 rem，根据屏幕大小动态...
微信小程序——VW、VH
tingyu_的博客
04-18 5371
vw和vh是css3中的中的新单位，是一种视窗单位，小程序中也同样适用 小程序中，窗口固定宽度为100vw，将窗口宽度平均分为100份，每一份是1vw。 小程序中，窗口固定高度为100vh，将窗口高度平均分为100份，每一份是1vh。 ...
微信小程序、在线视频播放
05-26
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，为用户提供便捷的服务体验。在微信小程序中实现在线视频播放功能，是许多开发者和企业的需求，它可以让用户无需下载安装应用即可享受流畅...
微信小程序---左滑删除.zip
02-21
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，为用户提供便捷的服务和丰富的交互体验。"微信小程序---左滑删除"这个主题是关于在微信小程序中实现一个常见的用户界面功能：通过左滑...
登录页面（移动端）.rar
09-09
在移动设备上，登录页面是用户进入应用程序或网站的关键入口，设计和实现一个良好的移动端登录界面至关重要。在这个项目中，开发者利用CSS技术创建了一个基本的登录页面，虽然描述中提到页面制作较为粗糙，但仍然能...
移动端布局资料.rar
03-12
在移动端布局领域，前端开发者面临着一系列挑战，如屏幕尺寸多样化、设备分辨率差异、以及不同浏览器对CSS样式的兼容性问题。...通过学习和实践这些内容，你将能够熟练地创建适应各种设备的现代网页和应用程序。
用swiper-slide模仿微信小程序之scroll-view
06-04
在微信小程序开发中，我们经常会遇到需要创建一个可滚动视图的需求，这通常可以通过使用`<scroll-view>`组件来实现。然而，对于某些特定的布局和交互效果，开发者可能会选择用其他方式来模拟`<scroll-view>`的行为。...
如何在小程序给页面根元素的高度撑满页面
yclstudy的博客
10-31 339
在页面的根元素上通过vh单位给定100 vh,由于页面内的padding和margin会造成页面的高度出现变化,可以通过box-sizing: border-box;做到消除由于高度变化而出现的滚动条。
微信小程序填坑之路（三）：布局适配方案（rpx、px、vw、vh）
热门推荐
李益
11-15 4万+
因为小程序是以微信为平台运行的，可以同时运行在android与ios的设备上，所以不可避免的会遇到布局适配问题，特别是在iphone5上，因为屏幕尺寸小的缘故，也是适配问题最多的机型，下面就简单介绍几种适配方法。 rpx适配 rpx是小程序中的尺寸单位，它有以下特征： 小程序的屏幕宽固定为750rpx（即750个物理像素），在所有设备上都是如此 1rpx=（screenWi...
uniapp中rpx、px、em、rem、%、vh、vw的区别是什么
zz_ll9023的博客
12-09 2103
在选择rpx、px、em、rem、%、vh和vw这些长度单位时，需要根据具体的使用场景和需求进行选择。总之，在选择长度单位时，需要考虑具体的使用场景、设备的特性以及页面的响应式设计需求。根据需要呈现的效果和页面的兼容性需求进行选择。rpx、px、em、rem、%、vh、vw的区别主要体现在定义和特性上。
微信小程序布局中的单位及使用
2301_76669854的博客
03-25 986
在PC端经常使用的单位，不用计算，直接使用，一般情况不用考虑设计图纸的来改变页面的大小。rem和rpx的换算关系：rem: 规定屏幕宽度为20rem；1px = 750/屏幕宽度 rpx 1rpx = 屏幕宽度/750 px。视口表示可视区域的大小。vw和vh是相对长度单位，永远以视口作为参考。相对单位，可理解为”root em”, 相对根节点html的字体大小来计算。系统将视口的宽度和高度都分为100份。1vw占用视口宽度的1%的尺寸单位，也是把页面按比例分割达到自适应的效果。
微信小程序100vh和windowHeight不一样高
me_reader的博客
06-27 253
【代码】微信小程序100vh和windowHeight不一样高。
微信小程序px、rpx、vh、百分比单位介绍
tl437002770的博客
01-25 1153
微信小程序px、rpx、vh、百分比单位介绍
微信小程序页面高度100%
haohaoxueqd的博客
07-08 414
page {
vue3适配移动端vw vh单位配合@media做的适配
05-21
Vue3本身并不提供移动端适配的方案，但是可以使用vw、vh单位，以及@media媒体查询来实现移动端适配。 1. 设置html的font-size 在入口文件中，可以通过计算屏幕宽度来设置html的font-size，例如： ```javascript //...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值