移动端h5页面设计图高度小于iPhone8等长屏手机解决方案

最新推荐文章于 2022-09-07 10:54:58 发布
原创 最新推荐文章于 2022-09-07 10:54:58 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了解决移动端页面底部出现空白的方法，通过调整html与body的高度并设置正确的背景颜色，确保在不同设备上都能正常显示。

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

在做移动端页面的时候，我们经常会遇到一些psd高度小于iPhone8手机高度的问题，这样按照设计图做出来的页面在iphone8手机上底部会出现白色的空白区域

解决办法：html与body设为高度100%，同时给body设置一个背景色，但是这里有一个小坑，如果是这样设置的background-color:rgba(226, 68, 51),在电脑浏览器上预览时是没有问题的，但是在真机上依然会出现底部白色屏，原因是因为电脑浏览器会将rgba（226，68，51）解析为rgb（226，68，51） 但是手机端不会，所以要么用rgba（226，68，51，1） 要么直接写rgb（226，68，51）

移动端页面不满一屏时实现一屏背景（图）
卡卡西：一个擅长拷贝的前端程序员
09-10 2624
一般，元素都是由元素内容撑开，但是开发过程中难免会遇到内容不满一屏，但是背景需要撑开一屏的情况（例如：列表页就一行数据，但是这页有个背景，总不能背景在这一条数据背后戛然而止，再往下就什么都没有了），查看前人经验，一般有以下几种解决方法： 1. 设置min-height      给父元素设置一个min-height: 100%;      照理说这样设置会自动撑开至屏幕大小，但假如内容复杂点...
「UCD-UI」移动端UI设计尺寸规范详解
拥抱AI Design
06-26 1687
移动端UI设计尺寸规范对于确保应用程序在不同设备上的兼容性和用户体验至关重要。
safe area
lx583274568的专栏
02-25 424
<meta name="viewport" content="viewport-fit=cover" /> body { padding-top: constant(safe-area-inset-top); //为导航栏+状态栏的高度 88px padding-left: constant(safe-area-inset-left); //如果未竖屏时为0 padding-right: constan.
苹果手机H5页面元素内容高度设置无效
m0_61233367的博客
09-07 833
在该样式中加入 flex-shrink: 0; 试一试。
关于H5页面在iPhoneX适配
weixin_34033624的博客
11-06 1683
​1. iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下： △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸： △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开发尺寸的倍率关系，但这只是外在的表现。倍图核心的影响因素在于PPI（DPI），了解屏幕密度与各尺寸的关系有助于我们深度理解倍率的概念：《基础知识学起来！为设计师量身打造的DPI指南...
禁止uiscrollview垂直方向滚动，只允许水平方向滚动；或只允许垂直方向滚动
热门推荐
hengshujiyi的专栏
06-09 8万+
禁止UIScrollView垂直方向滚动，只允许水平方向滚动 scrollview.contentSize =  CGSizeMake(你要的长度, 0);  禁止UIScrollView水平方向滚动，只允许垂直方向滚动 scrollview.contentSize =  CGSizeMake(0, 你要的宽度);  在UIScrollView的SubVie
axure手机页面设计说明_Axure中基于设备模板的移动端原型设计方法（附IPhoneX和IPhone8最新模板）...
weixin_39517199的博客
12-21 647
文章作者分享了一种基于设备模板的移动端原型设计方法，相信能够对你的原型设计工作带来帮助，值得马克。在使用Axure设计移动端原型的应用方面，我总结出了两种常用的方法。第一种是更适合在移动端进行演示的设计方法，大家可以参考我之前已经分享过的一篇教程：使用Axure打造最佳的移动端交互原型教程，使用这种方法输出的原型在手机设备上进行演示时可以达到跟真实APP几乎一致的展示效果及交互体验。在今天我将分享...
移动端H5页面截图【含 domtoimage、html2canvas 】
Candy_home的专栏
11-02 2万+
移动端H5页面截图【含 domtoimage、html2canvas 】 起因： 由于云栖大会项目需要支持 名片保存到本地功能【如下图红框】，所以，需要单独截取页面中的名片信息，并且保存到本地。 推荐给：需要获取页面内容，给页面截图的小伙伴 介绍两个工具： html2canvas + domtoimage 官方地址：https://github.com/n
iPhone8 Plus手机电路图中文版注释-总共81页
12-13
根据提供的文件内容，这里是一份关于iPhone 8 Plus手机电路图的中文注释版本，包含81页。这份资料对于硬件开发工程师、苹果店的维修人员以及电子技术高手来说，是一份极具价值的参考资料。下面是对这份资料中涉及的...
iPhoneX和iPhone8设备素材及原型模板.rp
最新发布
12-03
移动端设计，APP设计，H5页面设计
H5页面部分iPhone机型适配
xzj0197的博客
06-02 754
H5页面部分图片高度在iPhone8和iPhone12pro上显示有问题
vue页面自适应屏幕宽高_vue组件页面高度根据屏幕大小自适应
weixin_32512187的博客
12-30 8564
网页可见区域宽：document.body.clientWidth网页可见区域高：document.body.clientHeight网页可见区域宽：document.body.offsetWidth (包括边线的宽)网页可见区域高：document.body.offsetHeight (包括边线的宽)第一步: 将document.body.clientWidth赋值给data中自定义的变量dat...
图片自适应手机屏幕大小
freedom
02-27 1万+
后台编辑公告中包含图片在html里面插入图片，如果想让图片自适应屏幕的小而不是宽高固定不变可以在css代码里加入img { height: auto; width: auto\9; width:100%; }width:auto;是宽度自动的意思。\9是hack css 的一种写法，这种在正常css代码后面加"\9"的方式，只有IE浏览器才能识别，其他浏览器会忽略这条语句。这样就能做到差异化浏览器...
移动端web页面input+fixed布局bug总结
ly2983068126的博客
10-21 4万+
最近在做移动端，又涉及到了 fixed（固定位置定位）的问题，在使用fixed的过程中，遇到了一些的问题，并且部分问题无法找到较好的解决方案。下面 是我在网上找到的一些解决方法，仅供参考： 正常界面 图中被红色选中区域为 position:fixed 元素 问题1：footer输入框 focus 状态，footer 被居中，而不是吸附在软键盘上部。
iphone常见机型微信网页可视高度
weixin_30871905的博客
05-16 2110
导航栏+iphone状态栏高度： 64px = 导航栏44+状态栏20 iphone4 / 4s 屏幕总宽度: 320px 屏幕总高度: 480px 微信网页可视高度: 416px iphone5 / 5c / 5s /se 屏幕总宽度: 320px 屏幕总高度: 568px 微信网页可视高度: 504px iphone6 / iphone 7 屏幕总宽度...
flex布局在ios8上的兼容性问题
李留白
09-29 1万+
最近在做项目时，使用到了flex布局。其他ios版本都还好，唯独在ios8上遇到了flex布局没起作用的问题。后来经过研究才发现，safari使用的是webkit内核，在ios8上需要单独加一下兼容才起作用。display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center;
一篇真正教会你开发移动端页面的文章(二)
highboys的博客
12-10 5119
来源：HcySunYang http://hcysun.me/2015/10/19/一篇真正教会你开发移动端页面的文章-二/ 之前写了一篇文章《一篇真正教会你开发移动端一面的文章(一)》。那是本篇文章的基础，如果没有阅读过的同学可以去看看，今天就给大家带来干货，真真正正的讲到如何很好的开发一个移动端的页面 好了，让我们开
设置背景图片的两种方式，并解决手机端背景图片高度自适应问题
yujunjie7的博客
01-21 3842
1 设置背景图片的两种方式： 方式一： <img src="../img/10.jpg"/ class="back" id="Background"> .back{ position: fixed; width: 100%; height: 100%; display: block; z-index: -100; } 方式二： div class="body" id=...
iPhoneX高保真UI设计：Axure移动端原型图包下载
由于iPhoneX采用了全面屏设计，具有特殊的刘海区域、圆角屏幕等特征，设计师需要在原型设计阶段充分考虑这些因素，确保最终产品的用户体验。高保真原型图不仅能够展示界面布局和设计风格，还能提供交互体验的预览，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

宋哈哈

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值