最近很多小伙伴都在问h5页面在iphon11，12底部的小黑条和h5页面底部有白边ios这两个问题，那么本篇文章就来给大家详细解答一下，同时本文还将给你拓展h5下ios适配底部小黑条，简单解决方案，只
最近很多小伙伴都在问h5页面在iphon11，12底部的小黑条和h5页面底部有白边ios这两个问题，那么本篇文章就来给大家详细解答一下，同时本文还将给你拓展h5 下ios适配底部小黑条，简单解决方案，只需一步、H5 页面导航跟随页面滚动而联动，及 iPhoneX 底部补白、H5单页面可以做seo吗(如何做h5页面)、H5页面在iosApp上绑定的click事件不生效等相关知识，下面开始了哦！
本文目录一览：- h5页面在iphon11，12底部的小黑条（h5页面底部有白边ios）
- h5 下ios适配底部小黑条，简单解决方案，只需一步
- H5 页面导航跟随页面滚动而联动，及 iPhoneX 底部补白
- H5单页面可以做seo吗(如何做h5页面)
- H5页面在iosApp上绑定的click事件不生效
h5页面在iphon11，12底部的小黑条（h5页面底部有白边ios）
去小黑条是因为底部是选项卡，在11和12中加载完成后，点击选项卡后，选项卡高度会调高，所以要去掉。
参考：https://www.cnblogs.com/znegkaisheng/p/12724696.html
在视口中加入viewport-fit=cove
然后在修改底部选项卡样式
.uni-tabbar-bottom{
height: calc(100rpx+ constant(safe-area-inset-bottom));///兼容 IOS<11.2/
height: calc(100rpx + env(safe-area-inset-bottom));///兼容 IOS>11.2/
}
小黑条就没有了！！！！
h5 下ios适配底部小黑条，简单解决方案，只需一步
在页面加入一行css代码即可
@supports (bottom: env(safe-area-inset-bottom)) {
body,
.footer{
box-sizing: content-box;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
}然后在需要适配的元素上使用footer类即可
H5 页面导航跟随页面滚动而联动，及 iPhoneX 底部补白
项目开发过程中遇到一个主页，实现功能：
- 需要页面在滚动到导航时导航吸顶；
- 导航随页面滚动高亮选中；点击导航页面滚动到固定位置；
- 在导航项过多时导航横向滚动；
- 最后一个面板底部补白且兼容 iphoneX。
页面区域划分：
- 头部数字显示（在页面上拉后隐藏）
- 导航部分
- 面板部分（所有的面板放在一个大 div 里）
效果如下图：
一：页面在滚动到导航时导航吸顶（sticky 粘性布局）
<!--头部数字-->
<div class="head-number"></div>
<!--导航-->
<div id="Tab" class="tab">
<span v-for="(v,i) in tabOption" :class="{''cur'':i ===activeTab}" @click="changeTab(i)">{{v.v}}</span>
</div>
<!--面板区域-->
<div class="main-box">
<div class="pannel" v-for="(v,i) in tabOption"></div>
</div>
export default {
data() {
return {
activeTab: 0,//当前活动的tab项
tabOption: [{k:''netValue'',v:''净值''},{k:''notice'',v:''公告''},{k:''product'',v:''概况''},{k:''manager'',v:''投资经理''},
{k:''heavyStock'',v:''隐形重仓股''}{k:''relatedSecurities'',v:''管理人管理的产品''}}}},
<style scoped lang="less">
.tab{
position:sticky;
position:-webkit-sticky;
top:0;
z-index:1;
white-space:nowrap;
overflow-x:scroll;
-webkit-overflow-scrolling:touch;
}
</style>sticky 使用需要注意：1. 父元素不能设置 overflow:auto/hidden/scroll；
2. 必须指定 top、left、right、bottom 其中一个，否则只会处于相对定位；
3. 父元素的高度不能低于 sticky 元素的高度；
4.sticky 仅在其父元素内有效；
二：导航随页面滚动高亮选中；点击导航页面滚动到固定位置（通过 scrollTop 和 offsetTop 判断）
//钩子函数获取页面DOM
mounted(){
const pannel = document.querySelectorAll(''.pannel'');
window.addEventListener(''scroll'', throttle(() => {
let head_num = document.querySelector(''.head-number''),
head_num_height = parseFloat(getComputedStyle(head_num)[''margin-bottom'']) + head_num.clientHeight;
let top = document.body.scrollTop || document.documentElement.scrollTop;
for (let i = this.tabOption.length; i > 0; i--) {
//倒叙缩减循环次数
//js会对小数部分自动四舍五入，导致计算出现偏差，故+1解决
if (top + 1 >= pannel[i - 1].offsetTop + head_num_height) {
this.activeTab = i-1;
break;
}
}
}, 0));
}
//使用activeTab绑定class来控制导航高亮；点击导航只要改变body的scrollTop即可触发window.scroll事件便会重新计算activeTab
changeTab(i){
const head_num = document.querySelector(''.head-number''),
head_num_height = parseFloat(getComputedStyle(head_num)[''margin-bottom'']) + head_num.clientHeight,
s_top = document.querySelectorALL(''.pannel'')[i].offsetTop + head_num_height;
document.body.scrollTop = document.documentElement.scrollTop = s_top;
}计算原理见上图二中标注，注：div.offsetTop 是 div 的上边款与带有定位元素（absolute、relative、fixed）的父元素（如果父元素不是定位元素，则继续上溯所有祖先直到 body）的上边框之间的距离 (只读属性)
三、在导航项过多时导航横向滚动
Tab 导航由最外层 padding（绿色）与 span 的 margin（橘色）组成；
offsetWidth 为 width + padding + border（span 的各自蓝色部分，tab 的整个图部分）；
offsetLeft 为当前元素边框到定位父元素边框的距离（红线部分）
//监听activeTab来改变tab的scrollLeft值
watch: {
activeTab(v){
let $tab = $(''#Tab''),
tabWidth = $tab[0].offsetWidth,
tabPaddingLeft = parseFloat(getComputedStyle($tab[0])[''paddingLeft'']),
scrollLeft = $tab[0].scrollLeft;
let node = $tab.find(''span'')[v],
nodeOffsetLeft = node.offsetLeft,
marginLeft = parseFloat(getComputedStyle(node)[''marginLeft'']),
spanPlaceWidth = node.offsetWidth + marginLeft;
if(scrollLeft > nodeOffsetLeft) {//从左往右移动
$tab.scrollLeft(nodeOffsetLeft - marginLeft - tabPaddingLeft);
}else if(scrollLeft + tabWidth < nodeOffsetLeft + spanPlaceWidth) {//从右往左移动
$tab.scrollLeft(nodeOffsetLeft - tabWidth + spanPlaceWidth + tabPaddingLeft);
}
},
},四、最后一个面板底部补白且兼容 iphoneX
为了使最后一个面板能够被拉起来，那它的高度需要等于页面高度减去导航高度（此时只有导航没有头部数字部分），考虑到 iphoneX 底部小黑条的原因，故再需要加上 34px
//自动撑开底部
autoFillFoot(){
const headHeight = document.getElementById(''Tab'').offsetHeight;//头部固定高度
let pannel = document.getElementsByClassName(''pannel'');//滚动块
const windowHeight = common.getWindowHeight(),
lastPanelHeight = pannel[pannel.length - 1].clientHeight;
let needPatchBottom = false;
if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) { //iPhone;iPad;iPad Pro;
if ((screen.height === 812 && screen.width === 375 && window.devicePixelRatio === 3) || //X;XS;
((screen.height === 896 && screen.width === 414) && (window.devicePixelRatio === 2 || window.devicePixelRatio === 3 ))){//2:XR;3:XS Max
needPatchBottom = true;
}
}
//safe-area-inset-bottom:34px;safe-area-inset-top:88px;
if (lastPanelHeight < windowHeight) {
const paddingBottom = parseFloat(getComputedStyle(pannel[pannel.length-1])[''padding-bottom'']);
pannel[pannel.length - 1].style.height = `${windowHeight - headHeight - paddingBottom + (needPatchBottom ? 34 : 0)}px`;
}
},同样页面样式也需要兼容 iphoneX
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3),/* X,XS */
only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2),/* XR */
only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {/* XS Max */
:root {/* +-px是为了防止编译把100%变为1 */
height: calc(100% - 1px + constant(safe-area-inset-bottom) + 1px);/* 兼容 iOS < 11.2 */
height: calc(100% - 1px + env(safe-area-inset-bottom) + 1px);/* 兼容 iOS >= 11.2 */
}
}关于页面兼容 iphone 刘海、小黑条等可参考
https://www.cnblogs.com/lolDragon/p/7795174.html
https://objcer.com/2017/09/21/Understanding-the-WebView-Viewport-in-iOS-11-iPhone-X/
H5单页面可以做seo吗(如何做h5页面)
1. 如何做h5页面
你可以用很多方式实现对图文的编辑，能够实现在微信后台不能实现的一些内容
1使用dreamweaver简单的编程软件，用编程实现页面效果，在浏览器上预览效果后拷贝在微信公众号图文编辑后台，可以看到相同效果。
2使用第三方编辑软件，在页面上编辑成功后，直接在编辑框内拷贝后，粘贴在图文编辑页面。
3将微信公众号和第三方平台进行绑定，在第三方平台编辑好之后，编辑发布即可。
2. H5页面如何制作
H5这东西，在广告行业一直都有，原来叫做landing page或者着陆页。后来移动端的landing page越来越多，也不知怎么的就被挂上了“H5”的名号。
短时间来看，H5确实是目前广告宣传设计行业发展迅速的一块。广告行业向来是追着目标人群走的，当广告主的目标人群高度依赖手机，借着移动社交媒体在手机上推广各种设计精良、交互新颖的H5广告，也在正常不过了。
我之前也做过一些活动宣传推广类的H5，现在H5的制作门槛已经很低了，不需要掌握编程经验、不需要复杂的设计工具，就可以利用网上各种免费的H5的编辑器，快速制作发布自己的H5。
我常用的制作平台有：BlueMP、ih5、maka、易企秀、木疙瘩等。
总的来说各家的产品在功能上都差不多，都是将组件拖拽到画布上，然后调节各页的图片、动画
之后，就可以发布到微信朋友圈了，大致的操作其实和做PPT差不多。
但想出“高大上”的H5页面，可能不仅仅需要一个H5制作平台。一个专业的H5页面，需要创意+设计+制作+推广一系列环节的紧密配合。而对于普通的H5制作者来说，制作高逼格的H5，首先要有良好的页面设计、良好的用户观感，才能让里面的内容更清晰、更明确的得以展现。
我个人在制作H5页面的过程中，会配合使用这些以下创意工具。有需要的可以自行搜索。
1.灵感获取：
可以到Dribbble、Behance、Pinterest、花瓣等国内外设计师汇聚的设计类聚合平台，借鉴学习顶尖设计师们的优秀设计
2.图片素材：
向X度图片搜索说再见，微软的Bing图库、wallhaven、500px都是非常高质量的图库。
需要一些小的图标推荐阿里的iconfont图标库，有大量精美的icon可以免费使用。
3.色彩搭配：
很多人做H5的时候，很少考虑色彩的搭配，都是挑一些自己喜欢的、看着顺眼的就行了。其实色彩搭配的选择，对H5页面设计感的提升非常大。小白的话推荐coolors，直接从推荐的色彩主题里进行选择，记下色彩的值，在H5制作工具里输入使用就好了。
3. 如何做H5
主要可以从两方面入手。
第一，选择一个优质的制作工具很重要，直接关系到H5好不好看、够不够高级等。相比于以模板为主的制作工具来讲，个人比较推荐功能更为强大的意派Epub360，这是一款专业的H5页面制作工具，可以制作一镜到底、全景VR、画中画等酷炫的H5作品。新手可以在其模板库中搜索关键词查找相关的教程，把教程琢磨透后，对提升自身的制作技能一定有很大帮助。
第二，无论新手还是老手，都需要经常参考、吸收H5大神们优质作品的优势，以帮助自己大开脑洞、培养审美，并避免故步自封。意派Epub360的案例库及模板库有很多刷屏级的作品可供大家参考，此外，H5案例分享、爱果果等平台上也有非常多的案例，大家可以多多参考收藏。
4. h5页面如何制作
1、首先打开人人秀的官方网站，在官网主界面的右上方可以看到【登录】和【注册】两个选项，如果之前注册过账号的，可以直接点击登录按钮。
2、使用账号登录到人人秀网站之后，在我的场景里可以找到【创建场景】选项，如下图红框位置所示。
3、点击【创建场景】选项之后，即可进入场景创建界面了，可以创建一个空白场景，也可以使用其它作者已经创建好的场景模板，如下图所示。
4、在这里我们选择自主创建一个模板，点击【空白模板】选项，即可进入场景的创建界面了，如下图所示。
5、点击右方的【背景图片】区域，可以弹出背景素材库，为自己制作的文案选择漂亮的背景，除此之外，也可以自己上传漂亮的图片作为背景，如下图所示。
6、点击右边菜单栏里的【音乐】，【文字】等功能选项，可以在制作的场景里添加音乐背景，文字等，选择添加的文字，也可对文字进行编辑，设置动画模式等，如下图所示。
7、点击左下侧的加号，也可以增加新的界面，然后根据上述的方法对新加的界面进行单独的编辑，如下图所示。
8、场景编辑完成之后，点击右上角的【发布】按钮，即可将自己创建的场景发布，这样微信h5页面就制作完成了。
5. 如何做H5页面的适配
优点有：
1、H5页面最大的优势是跨平台，开发者无需太多的适配工作，用户无需下载，打开一个网址即可，就能访问了。
2、H5页面开发简单，开发成本低，入门门槛低，周期短，给小团队更多的机会。并且维护更新简单，无需用户更新客户端，只在网站更新即可。
3、H5页面推广成本降低，推广的只是一个URL链接，二维码，不需要几十兆，几百兆的安装包去推广。
4、传播效果好，h5页面最大的优势是传播能力极强，有非常好的传播效果，是企业商家做品牌曝光，产品宣传的利器。
5、现在市面上有大量的h5页面制作软件，不需要敲代码就可以制作h5页面。大大节省开发时间。
h5页面的优势优点有很多，关键是你能发挥出来多少，h5页面是否受欢迎，是由你的内容决定的，好的内容，能让人参与进来，就是好的h5页面。因此，妙集在为客户制作H5页面时，会挖掘与品牌有关的价值信息，合理运用技术，为消费者打造流畅的互动体验。从而提高品牌的用户黏度。
6. h5页面怎么制作
h5页面可以通过代码开发和制作工具制作。
代码不太懂，想学的话可以通过找教程自学或直接上个培训班。
制作工具的话主要分为模板类工具和专业类工具。模板类工具基本上只能修改文字和图片，但不能满足高需求的创意定制，很多功能都比较弱。而专业类工具的自由度就要高很多，能做出的交互效果也很惊艳。
如果不会编程又不想用模板类工具的话，可以尝试用专业类H5工具意派Epub360制作一些交互性强、创意度高的H5作品。你可以先多看看官网上的案例和模板，找找灵感，然后再对着官网上的教程慢慢学。从简单的合成海报、长页面、测试题到比较有难度的一镜到底、快闪、画中画，都可以自学完成。此外，意派也会根据用户的需求不断进行功能开发，也就是说，这个工具是一直在贴近用户、跟着潮流的，比较适合长期学习使用。
7. H5页面怎么制作
H5项目制作流程：策划、创意文案、平面视觉、动画交互、前后端的开发、推广等方面
有的答主写的比较笼统，或者比较深奥，不少读者看不懂但觉得好专业，看就就完了，对大部分知友来说毫无意义的回答……咳咳，话说回来，虽然很早的H5项目制作，或者现在有些大厂还是靠团队分工，策划，视觉，开发等多个工作划分，但笔者了解到目前制作H5大多是一个设计师或者一个运营，老板能让一个人做的绝不分配成两份工作。当然也是基于一些类似 意派Epub360 专业的H5设计工具。随着互联网的发展，H5技术的普及，对人力成本的控制和开发效率需求，这类H5工具可以大大缩短项目的开发周期，设计、排版、动画、交互、数据……现在基本上一个人就可以完成以前需要一个团队制作的H5项目。
8. 如何制作h5页面
你可以用意派Epub360进行制作，这是一款专业的在线H5页面制作工具，可实现一镜到底、人脸识别、合成海报、快闪等创意型H5的制作，每种创意形式的具体制作方法可在意派的教程中心搜索关键词找到，方便且详细，非常适合零基础新手。
H5页面在iosApp上绑定的click事件不生效
html代码如下
<div>
<div>
div.a
div.b
</div>
</div> js代码如下
$(''.group'').on(''click'',''.list'',function(){
//todo...
})很简单只是给.group下的.list绑定了点击事件,但是到了iosapp嵌套页面中就是不生效,只有点击其中的img标签才会触发桥接方法
解决方案
1 修改css
.list{
cursor:pointer;
}
2 touchstart事件代替
$(''.group'').on(''click start'',''.list'',function(){
//todo...
})关于h5页面在iphon11，12底部的小黑条和h5页面底部有白边ios的介绍现已完结，谢谢您的耐心阅读，如果想了解更多关于h5 下ios适配底部小黑条，简单解决方案，只需一步、H5 页面导航跟随页面滚动而联动，及 iPhoneX 底部补白、H5单页面可以做seo吗(如何做h5页面)、H5页面在iosApp上绑定的click事件不生效的相关知识，请在本站寻找。
本文标签：
