关于遇到h5页面苹果手机高度适配问题

时光伊始

于 2024-08-12 16:01:20 发布

阅读量264

点赞数 2

文章标签：智能手机 vue.js vue javascript

本文链接：https://blog.csdn.net/weixin_45243726/article/details/141134106

版权

在苹果手机中，浏览器下方菜单也会算到屏幕中，导致calc（100vh - px）高度达不到想要的效果。

网上找了好几种方法，有进入时检测是否是苹果手机浏览器，多减去80px，兼容效果不太好，网页端模拟器就会出现空白

我是这样处理的，感觉效果还是可以的：

用vue this.boxheight = `calc(window.innerHeight}px - 0.688rem)`

用js的话需要获取元素直接设置style中的高度

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

时光伊始

关注关注

2
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

详解移动端h5页面根据屏幕适配的四种方案

11-21

在移动端H5页面开发中，适配屏幕是一个重要的任务，以确保内容在不同尺寸和分辨率的设备上都能正常显示。以下将详细介绍四种常见的适配方案： ### 方法一：引入淘宝开源的可伸缩布局方案（lib-flexible）淘宝的可...

H5在苹果浏览器上100vh不在一屏的解决方法

最新发布

qq_43235503的博客

05-30

290

H5在苹果浏览器上100vh不在一屏的解决方法

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

H5页面在iphone上的适配

qq_36135258的博客

09-12

2761

H5页面在iphone刘海屏和底部黑线的适配。

h5页面在Safari浏览器中高度适配问题

qq_39742704的博客

12-22

2216

在开发H5时，页面高度设置100vh，使用Safari浏览器打开时底部导航会被遮挡，但在微信、app、及其他打开方式中显示正常。

app端 h5 页面兼容性问题和解决方案

theScoreONE的博客

10-25

7188

原文链接 (https://www.toutiao.com/i6751364844672254478/) 最近给公司微信公众号，写了微信h5业务页面，总结分享一下前端开发过程中的几个兼容性坑，项目直接拿的公司页面，所以下文涉及图片都模糊处理了。一、ios端兼容input光标高度问题详情描述：input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上当点击输入的时候，光标的高度和父盒子的...

ios中webView高度设置100%却无法铺满

qq_40482342的博客

03-04

775

viewport-fit=cover 是用来适配 iOS 设备的 webview 的一个 CSS 视口属性，可以确保网页内容在 iOS 设备上铺满整个屏幕，包括刘海屏幕或底部的安全区域。添加这个属性后，网页内容应该能够完全填充整个屏幕，避免了默认的内容放大效果。这样就可以让网页内容在 iOS 设备上铺满整个屏幕了。

ios x及以上版本H5页面高度100%、100vh自适应滚动条问题

TheHtmler的博客

12-13

5862

一、问题在项目实践过程中，会遇到移动端h5页面高度的自适应问题，比如在chrome devtools下的iphonex，默认高度812px，实际高度是852px，倒是在手机端浏览会有滚动条，很烦～二、方案 height设置 100vh 或者height设置 100% ➕ overflow-y:hidden; 要么会出现滚动条，要么会出现下面出现40px白底解决方案：在index.html中，meta标签添加 viewport-fit=cover，done～～ <meta name

ios html5 高度自适应屏幕,OC和H5交互并且H5自适应高度

weixin_31541755的博客

06-17

364

2016.01.10 今天没事,就自己用这个框架写了一个demo出来,欢迎大家指正,地址给你们这个OC和H5交互现在用的比较多,方法也各种各样,这里我也就稍微补充一点,仅供大家参考.首先来说我用的第三方是JavaScriptBridge 这里强调一下必须要有一个前端工程师,会写一点简单的JS代码,可以通过网络请求下来,具体怎么上传的我不知道,在最后我会附上简单的JS代码,上传是你们的事哦!然后写...

iphoneX 适配客户端H5页面的方法教程

12-13

目前，很多APP设计师小伙伴已经开始转向H5前端开发啦，但是解决所有iPhone和安卓机型的适配问题是我们的重中之重。无论是设计APP还是写前端H5.都是要考虑移动端的兼容性。由于iphoneX做了全面屏并且还保留一块小...

手机H5页面静态模板.zip

11-03

30款网页模板，HTML+CSS+JS组成的静态网页，涵盖商城、博客、旅游、资讯、搜索和菜单类的页面，在网页中F12即可呈现手机和浏览器两种显示模式，拿来即用，直接二次开发（编辑图片和文字）。

小程序以及H5页面上IphoneX底部安全区域小黑条适配问题

03-29

使用已知底部小黑条高度为34px/68rpx机型适配(不建议) 使用微信官方API，getSystemInfo()中的safeArea对象进行适配（建议）使用苹果官方推出的css函数env()、constant()来适配（建议）安全区域看看图就明白了，...

H5 页面适配所有 iPhone 和安卓机型的六个技巧

热门推荐

极北三少

04-25

2万+

目前，很多APP设计师小伙伴已经开始转向H5前端开发啦，但是解决所有iPhone和安卓机型的适配问题是我们的重中之重。无论是设计APP还是写前端H5.都是要考虑移动端的兼容性。 25学堂今天跟大家来回顾一下H5页面去适配所有iPhone和安卓机型的一些技巧和办法。回归正题，兼容iphone各版本机型最佳的方式就是自适应。 1、viewport 简单粗暴的方式： <meta n...

关于H5项目safari高度适配的问题

weixin_44901028的博客

01-17

4678

safari中高度不是100%问题解决方案判断safari浏览器打开为什么Chrome有Safari字段？其他的浏览器也有吗？问题最近再写H5的项目，由于H5的项目以前接触较少，这次也是遇到了一些的问题我在项目中设置了HTML，body高度100% 然后具体的盒子设置了 width:100vw; height:100vh; 然后从微信和app中打开是没有问题的，高度可以撑满屏幕，但是通过s...

IOS系统safari浏览器，上拉加载列表使用vh计算高度布局的问题

m0_56363729的博客

02-02

981

IOS系统safari浏览器，上拉加载列表使用vh计算高度布局的问题

H5 移动端开发知识及解决方案

qq_43477721的博客

11-24

1053

移动开发基本知识点 1、基础Meta基础知识： H5页面窗口自动调整到设备宽度，并禁止用户缩放页面  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /> // width 设置viewport宽度，为一个正整数，或字符串‘device-width’ // height 设置viewport高度，一般

谨记手机端页面要使用em，而不是用px，以及MAX,MIN-width

foreverlikui的博客

07-26

3006

我个人认为手机端页面使用em，而不是用px的原因是：em是个相对单位，而每个手机的em值不一样，就相当于%一样，可以让手机本身去定义这个值的具体大小。而PX是个绝对单位，如果我们使用PX的话，比如说背景我们定义width=800px;，而手机浏览器的宽度只有640px，页面是显示不完全的，这时候就要用% 在制作手机端页面时，通常会定义一个max-width和min-width，width

H5底部导航栏适配苹果X等机型

如需咨询可联系我，V：chen2318341674

04-15

1395

只需要在底部导航栏的div样式中加入： padding-bottom: calc(0.1rem + env(safe-area-inset-bottom)) 0.1rem代表实际底部导航栏与屏幕底部的距离； env(safe-area-inset-bottom)则是自动适配屏幕距离底部的距离，如果是苹果x此值则会变大。非常好用的办法，相比用Js判断屏幕尺寸动态定义padding-bottom好用多了，且代码简单！ ...

记录一个鸿蒙开发中获取webView内容高度不正确的问题

liubo的博客

04-10

797

/ 点击按钮时，通过loadData，加载HTML格式的文本数据。// 组件创建时，加载www.example.com。这里是web组件初始化的代码。//记录上次网页的偏移量。

h5页面适配手机流浪器

04-06

作为AI助手，我不确定“手机流浪器”是什么，但是我可以提供一些关于h5页面适配手机屏幕的建议。 1. 使用响应式设计：在设计h5页面时，应该考虑到不同屏幕尺寸的设备，使用响应式设计来适应不同的屏幕尺寸，确保页面在所有设备上都能正常显示。 2. 使用视口（Viewport）：视口是网页中的一个虚拟区域，决定了网页的可视区域大小。在h5页面中，必须设置视口元标签，以确保网页在移动设备上正常显示。 3. 使用相对单位：在h5页面中，应该使用相对单位（如em和rem），而不是固定单位（如px），以确保页面在不同的屏幕尺寸上都能正常显示。 4. 缩放：在h5页面中，应该允许用户对页面进行缩放，以便在不同的屏幕尺寸上查看页面。 5. 测试：在设计h5页面时，应该在不同的设备上进行测试，以确保页面在所有设备上都能正常显示。