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

最新推荐文章于 2025-01-17 18:27:52 发布
最新推荐文章于 2025-01-17 18:27:52 发布
阅读量657 收藏 1
点赞数
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_51528868/article/details/135038516
版权
文章讲述了小程序中，由于系统内置导航栏和tabBar的存在，100vh高度会相应减去。通过设置`navigationStyle:custom`和`custom:true`可以移除这些元素。相比之下，浏览器由于没有预设组件，100vh始终保持完整高度。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

  小程序可以通过

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

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

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

柠檬树^-^
关注
微信小程序px、rpx、vh、百分比单位介绍
tl437002770的博客
01-25 1726
微信小程序px、rpx、vh、百分比单位介绍
【微信小程序】微信小程序开发环境搭建：项目发布及上线详解
墨夶的博客
11-13 1838
微信小程序的发布流程包括了从开发环境搭建、项目开发、代码上传、提交审核到最后的发布上线等多个步骤。本文将详细介绍如何从开发环境搭建到最终发布上线的完整流程，帮助开发者顺利完成微信小程序的开发和发布。通过本文的详细介绍，你应该已经掌握了从开发环境搭建到最终发布上线的完整流程。希望这些步骤能够帮助你顺利完成微信小程序的开发和发布，为用户提供更多优质的服务和体验。如果你在发布过程中遇到任何问题，或者有任何疑问，欢迎在评论区留言。我们非常乐意为你提供帮助，一起解决遇到的问题！
论小程序height:100vh或100%的大坑
Anlantic的博客
07-11 878
1、scroll-y使用变量控制，输入框聚焦设置设置为false,失去焦点设置为true。问题也相当于没解决。咦，解决方案的高度100vh怎么和我的那么像呢，于是抱着试试的心态，将scroll-view的height改为了height:calc(100vh - 1rpx),然后发现成了。问题：原生小程序使用scroll-view包裹的很多输入框(input),当输入内容时，输入框的文字会向上跑，就是错位的问题。2、使用input的always-embed设置为true,对于我的问题没解决。
小程序设置height:100vh导致页面超出屏幕可以上下滑动
me_reader的博客
05-27 1955
在手机上测试的时候页面可以上滑且出现一条白色的线条。给页面添加`position: fixed`
微信小程序——VW、VH
tingyu_的博客
04-18 5663
vw和vh是css3中的中的新单位，是一种视窗单位，小程序中也同样适用 小程序中，窗口固定宽度为100vw，将窗口宽度平均分为100份，每一份是1vw。 小程序中，窗口固定高度为100vh，将窗口高度平均分为100份，每一份是1vh。 ...
微信小程序页面高度100%
haohaoxueqd的博客
07-08 495
page {
移动端适配
weixin_57259948的博客
10-24 1507
引言 移动端适配一向是很令人头大的问题，因为随着移动设备型号数量的爆发式增长，手机屏幕尺寸越来越多样化，网页内容自适应屏幕尺寸进行显示的需求也就越来越强烈。原本可能通过百分比/媒体查询等简单手段就可以常见的适配问题，但是对于页面有复杂结构或者视觉上有特殊要求的，就需要通过其他手段来解决了。 像素基础 像素 像素是一个老生常谈的问题了。不论是做前端开发还是做UI设计，都离不开这个话题。其实真要深究起来，像素是一个十分复杂的概念。追溯到上世纪6、70年代，计算机的输出设备还是点阵式打印机，如何使打印机打
微信小程序、在线视频播放
05-26
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，为用户提供便捷的服务体验。在微信小程序中实现在线视频播放功能，是许多开发者和企业的需求，它可以让用户无需下载安装应用即可享受流畅...
微信小程序｜步骤条
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
08-25 1万+
步骤条是现代用户界面设计中常见的元素之一，它能够引导用户按照预定顺序完成一系列任务或步骤。在小程序中，实现步骤条可以为用户提供更好的导航和引导，使用户体验更加流畅和直观。
微信小程序在 iOS 系统上调用输入法失败,详细分析和具体操作步骤
最新发布
m0_69943017的博客
01-17 669
确保你的输入框代码格式正确，尤其是focus和bindtap等属性。
微信小程序100vh和windowHeight不一样高
me_reader的博客
06-27 385
【代码】微信小程序100vh和windowHeight不一样高。
微信小程序填坑之路：布局适配方案（rpx、px、vw、vh）
Purpletaro的专栏
07-15 2683
因为小程序是以微信为平台运行的，可以同时运行在android与ios的设备上，所以不可避免的会遇到布局适配问题，特别是在iphone5上，因为屏幕尺寸小的缘故，也是适配问题最多的机型，下面就简单介绍几种适配方法。 rpx适配 rpx是小程序中的尺寸单位，它有以下特征： 小程序的屏幕宽固定为750rpx（即750个物理像素），在所有设备上都是如此 1rpx=（screenWidth / 750）px，其中screenWidth为手机屏幕的实际的宽度（单位px），例如iphone6...
微信小程序中的vw和vh单位
reg183的专栏
11-24 1117
微信小程序中的vw和vh单位 100vw代表手机宽度， 100vh代表手机高度。 实现代码： button{ width: 50vw; }
微信小程序中设置高度height:100%;无效
weixin_44415209的博客
07-27 1万+
1.微信小程序中直接设置高度height:100%;是没有效果的 直接上图： 2.page{height:100%;} 要想高度占满整个页面得用page{height:100%;}，这样才能控制整个页面的高度 上图片： ...
对微信小程序的一些用法的感悟和总结
qq_48701278的博客
05-03 1989
文章目录前言一、一些代码句的用法1， page页面下有多余空白区域 min-height:100vh;2，3，4，5，6，7，8，二、一些代码句的组合1，2，3，4，5，6，7，8，总结 前言 过去的半年都在做一个项目，我的分工是小程序前端，最近开始着手结项工作，想着把wxml和wxss里面一些我刚上手时不了解或者遇到的一些问题和用法总结一下。各个组件的用法我就不展开说了，官方文档上的属性和例子都很好，可以去看一下，这里是微信官方小程序文档链接：微信开放文档 现在进入正题~~ 一、一些代码句的用法
微信小程序填坑之路（三）：布局适配方案（rpx、px、vw、vh）
热门推荐
李益
11-15 4万+
因为小程序是以微信为平台运行的，可以同时运行在android与ios的设备上，所以不可避免的会遇到布局适配问题，特别是在iphone5上，因为屏幕尺寸小的缘故，也是适配问题最多的机型，下面就简单介绍几种适配方法。 rpx适配 rpx是小程序中的尺寸单位，它有以下特征： 小程序的屏幕宽固定为750rpx（即750个物理像素），在所有设备上都是如此 1rpx=（screenWi...
【无标题】 移动端解决高度设为100vh时，页面超出窗口问题
qq_61834864的博客
10-31 6569
移动端解决高度设为100vh时，页面超出窗口，会产生滚动条问题
H5浏览器上使用100vh的坑及解决办法
sunnyjingqi的博客
04-28 2323
近期开发一个移动端的详情页，布局是有一排操作按钮固定在页面底部，中间内容部分在页面内总想滚动，开发时我把页面中间部分的高度设置为100vh - 50px，overflow：auto；在浏览器的控制台模式看没问题，微信上的浏览器和小程序看这个页面也没问题，最后突然发现在安卓和苹果手机的浏览器上展示有问题，具体表现为：安卓（华为mate60）：页面展示地址栏和底部导航栏时，看不到操作按钮，当页面滚动时顶部地址栏隐藏，底部的操作按钮被滚动上来了。
postcss-pxtorem 适配PC端和移动端
01-07
对于基于 Vite 构建的应用程序，在 `vite.config.ts` 文件里添加如下所示的相关配置： ```typescript import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import postcssPxToRem from '...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值