苹果手机H5页面元素内容高度设置无效

已于 2022-09-07 11:40:53 修改
阅读量776 收藏
点赞数
文章标签： vue.js javascript 前端
于 2022-09-07 10:54:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61233367/article/details/126741150
版权
本文探讨了在使用Vue.js开发H5页面时遇到元素高度设置无效的问题，特别是当应用了display: flex;布局时。通过在样式中添加flex-shrink: 0;可以解决这个问题，确保元素高度的设定能够正常显示。
摘要由CSDN通过智能技术生成

vue 写的H5页面高度无效果，

                width: 100%;
                height: 120px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                position: relative;
                border-bottom: 1px solid #b19967;

如果用的display: flex;弹性布局，在该样式中加入    flex-shrink: 0;  试一试

加入后的样式

                width: 100%;
                height: 120px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                position: relative;
                border-bottom: 1px solid #b19967;

​​​​​​​                flex-shrink: 0;

h5开发网站-css实现页面的背景固定定位；以及安卓ios手机端兼容问题
weixin_48596030的博客
09-05 1220
在页面滚动时，背景图片保持不变，而不是跟随滚动。
关于ipad的flex-grow:1属性失效问题
李恒道的博客
01-24 1183
w3c手册 转载自油猴中文网：https://bbs.tampermonkey.net.cn/forum.php 李恒道QQ4548212 油猴中文网https://bbs.tampermonkey.net.cn/forum.php TamperMonkey GreaseMonkey 油猴脚本 脚本交流 脚本分享 油猴脚本开发 油猴基础开发 油猴 油猴中文 公众号:叛逆青年旅舍https://bbs.tampermonkey.net.cn/forum.php 这里参考的是 10.5 Content h
关于遇到h5页面苹果手机高度适配问题
最新发布
weixin_45243726的博客
08-12 325
用vue this.boxheight = `calc(window.innerHeight}px - 0.688rem)`网上找了好几种方法，有进入时检测是否是苹果手机浏览器，多减去80px，兼容效果不太好，网页端模拟器就会出现空白。在苹果手机中，浏览器下方菜单也会算到屏幕中，导致calc（100vh - px）高度达不到想要的效果。用js的话需要获取 元素直接 设置style中的高度。
webView加载H5界面，显示高度不正确
uniquemei的博客
05-05 3226
项目中需要加载webView界面，是一个很长的列表，然后点击webView中的某个地方，会加载新的H5界面，但是在手机上显示的位置不正确，如果滑动到底部，点击加载到新H5界面，新的界面位置显示是一片空白，你需要往上滑动才看到新加载的界面。 这是因为共用的是同一个webView加载的，需要重新设置webView的高。 DisplayMetrics dm = new DisplayMetric...
使用vw适配页面ios中img标签设置宽度无法显示
u014477038的专栏
07-24 913
最近项目全线用了新的vw适配方案，设置了img的宽度，在ios上无法显示图片，google之，找到了解决办法，全局使用img{content:normal!important;}既可解决。 找了一下原因，是因为在content中写了viewport-units-buggyfill来兼容不支持vw的设备，导致这个原因。 那上面的方法就不是最佳解决方案，应该在图片外层套一个div，设置位置跟宽度，...
flex布局在iOS上出现高度塌陷
Yu_Jian_Qt的博客
07-15 1778
flex布局在iOS上出现高度塌陷 问题： 常规盒子布局，在多数苹果机和安卓机上可以正常显示，在部分iOS上出现高度塌陷 原因： 子元素高度加起来超过了父元素高度，从而触发坍缩 解决办法： 给会出现高度坍缩的元素加上这个CSS flex-shrink: 0; ...
H5页面在安卓中设置height:100%;依然无法充满屏幕的解决方法
奥巴牛的博客
04-19 6886
在开发过程中，需要在H5页面点击出遮套层，电脑上调试正常显示，但是在app中内嵌H5页面时，遮套层总会在屏幕下方留一个缝隙（已经设置了height:100%）。经过排查，将position:absolute改为position：fixed;即可解决；...
H5（1）H5页面的新增元素的介绍和使用
weixin_40693717的博客
01-14 1251
1、H5并不是新的语言，而是Html语言的第五次重大修改-版本 2、支持：所有主流浏览器都支付H5（Chrome，firefox，safari...）.IE9及以上支持H5，但是Ie8及以下不支持H5 3、改变用户与文档的交互方式：多媒体：video、audio、canves 4、增加了其它的新特性：语义特性、本地存储特性、网页多媒体、二维三维、特效（过度、动画） 5、相对于H4: （1...
js移动端页面判断是否是iphoneX，然后去设置元素对应高度？
qq_29236119的博客
04-08 582
在开发h5项目有时候需要判断iPhone型号，需要区分一下是否为iPhoneX，实现如下： methods: { isIPhoneX() { let u = navigator.userAgent; let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if (isIOS) { if (screen.height == 812 && screen.width == 375) {
H5页面（八）常见的问题二------填坑
斗师——Ace
06-09 1968
添加小程序，兑换各种视频教程/数据资源。 1. 添加到主屏后的标题（IOS） <meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式（IOS） 当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏（从浏览器跳转或输入链接进入并没有此效果） <meta name="app...
H5页面WebView在iPhoneX的适配
如鱼得水的专栏
05-03 1万+
1.  iPhoneX的介绍屏幕尺寸    我们熟知的iPhone系列开发尺寸概要如下：△ iPhone各机型的开发尺寸转化成我们熟知的像素尺寸：△ 每个机型的多维度尺寸倍图其实就是像素尺寸和开发尺寸的倍率关系，但这只是外在的表现。倍图核心的影响因素在于PPI（DPI），了解屏幕密度与各尺寸的关系有助于我们深度理解倍率的概念：《基础知识学起来！为设计师量身打造的DPI指南》iPhone8在本次升级...
H5移动端常见问题
happy任的博客
04-13 2300
h5 常见问题 1. H5 页面窗口自动调整到设备宽度，并禁止用户缩放页面 一、HTML 页面结构 // width 设置 viewport 宽度，为一个正整数，或字符串 'device-width' // height 设置 viewport 高度，一般设置了宽度，会自动解析出高度，可以不用设置 // initial-scale 默认缩放比例，为一个数字，可以带小数 // mi...
vue h5 项目适配ios问题
shiyutim
11-15 2483
vue h5项目适配ios的问题 h5项目在安卓上运行正常，但是在ios上就出现问题 1适配iphoneX以上型号底部栏遮挡的问题 @media (min-device-height: 810px) { padding-bottom: .5rem; } 2ios页面缩放问题 在index.html页面<head>标签里面加入如下<meta> <meta na...
table设置height属性不起作用的解决办法
chenfengcn的专栏
05-18 1万+
　　最近写JS对table的操作时，发现一个奇怪的现象，对table的width属性进行设置可以改变table的大小，但对table的height属性进行设置时，居然报没有这个属性。代码如下： [code="js"]var table = document.getElementById("textTable"); table.width = 90%;　　//这句可以正常执行并改变Table宽度...
苹果手机浏览器 不支持line-height属性的解决方法
业余前端的职业经历
06-22 1586
在搞input输入框的时候在 苹果浏览器上有点奇怪 input{ height: 35px; line-height: 35px; } <input type="text" placeholder="请输入信息"> 然后输入上并没有问题 主要是 用户点击的时候 那个输入指示的竖线 和 input输入框的高度一样 很难看 我想要的是 输入的竖线 和placeholder 的高度一样 当用户点击的时候 就像我下面写的红色线条一样 很难受 我才用的解决方法是 使用padding 内边距进行撑起
h5适配ios顶部和底部安全区域的问题
热门推荐
铁锤妹妹的博客
05-25 2万+
一. 前言： 苹果手机从iphoneX之后，屏幕顶部都有一个齐刘海，iPhoneX 取消了物理按键，改成底部小黑条，如果不做适配，这些地方就会被遮挡，所以本文记录一下齐刘海与底部小黑条的适配方法。 二. 知识点学习 1）viewport-fit iOS11 新增特性，苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展，用于设置网页在可视窗口的布局方式，可设置三个值： contain: 可视窗口完全包含网页内容 cover：网页内容完全覆盖可视窗口 auto：默认值，跟 c
ios部分机型出现select、input等控件点击后失效不可再次点击dug
qq_40665861的博客
11-12 1020
问题描述 在昨天晚上的时候测试突然告诉我一个问题，在iphone 6s中select选择器在第一次点击后，其他的选择无法点击。整个手机都属于暂时性死机状态。 问题分析 当时首先对代码进行了排查，排除是逻辑方面的问题。经过多方面验证发现只有6s会出现，这是对兼容性进行了进一步的考虑。 多方面兼容后，发现也不是兼容的问题。在一步步的实验中发现当点击后，需要滑动一次才可以继续点击，这个时候发现有可能是弹...
常见的移动端H5页面开发遇到的坑和解决办法
qq_35859392的博客
04-17 909
转过来，平时看看。虽然还有很多问题至今无解。比如：华为麒麟950的P8和meta打开我们的应用首页经常偶发白屏。！！ 1、安卓浏览器看背景图片，有些设备会模糊。 用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？ 经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的9...
flex 高度在ios撑不开的问题
与你清欢
11-11 1726
问题：写了一个flxed布局，在flex下高度撑不开的问题，找了很久都找不到结果。 最后还是找到了答案：“flex布局撑开的最大高度不会大于父级flex元素设置的高度！” 解释一下： <div style="height:400px;overflow-y:scroll"> <div style="display:flex;flex-direction:column"> <div style="height:100px">1</div> ..
html安卓 高度显示异常,app页面 本地浏览器显示高度布局正常 换到真机测试 子页面高度就不能撑满屏幕...
weixin_28752627的博客
07-01 262
chrome浏览器下测试子页面布局高度正常真机测试下//启用双击监听mui.init({gestureConfig:{doubletap:true},subpages:[{url:'student-statistics-echarts.html',id:'student-statistics-echarts.html',styles:{top: '45px',bottom: '0px',}}]})...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值