苹果手机tab显示异常怎么修改

其他手机的tab是正常显示的

苹果手机为什么显示异常，该怎么改呢

.yx_home{
    display: none;
    background:white;
}
.topboxs{
    width: 100%;
    height: 1.8rem;
    z-index:10;
}
.topbox{
    display: flex;
    align-content: center;
    height: 1.8rem;
    position: fixed;
  top:0;
    left: 0;
    right: 0;
    z-index:10;
    justify-content: space-around;
}
.toptitle{
    display: inline-block;
  position:relative;
    text-align: center;
    line-height: 1.8rem;
    font-size: 0.7rem;
    font-weight: 500;
}
/* .toptitles{
    width: 49.5%;
} */
.topselect{
    color: #029dff;
}
.selectspan{
    width: 43%;
    height: 0.12rem;
    background: #029dff;
    position: absolute;
    left: 30%;
    bottom: 0;
    border-radius: 0.1rem;
    display: none;
}
.bottom_box{
    width: 100%;
    height:2.1rem;
    position: fixed;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 0;
    z-index: 10;
    border-top: 1px solid #f2f1f1;
}

<!-- syx-首页改造 -->
    <div class="topboxs yx_home">
    </div>
    <div class="topbox" id="thetitle" style="display:none;">
        <div class="toptitle topselect">产品介绍
            <span class="selectspan"></span>
        </div>
        <div class="toptitle">理赔流程
            <span class="selectspan"></span>
        </div>
        <div class="toptitle">常见问题
            <span class="selectspan"></span>
        </div>
    </div>
    <!-- 客户端首页 -->
    <div class="topbox" id="theretitle" style="display:none;">
        <div class="toptitle toptitlets topselect">投保链接
            <span class="selectspan"></span>
        </div>
        <div class="toptitle toptitlets">产品介绍
            <span class="selectspan"></span>
        </div>
        <div class="toptitle toptitlets">理赔流程
            <span class="selectspan"></span>
        </div>
        <div class="toptitle toptitlets">常见问题
            <span class="selectspan"></span>
        </div>
    </div>

if (is_agent) {
    $(".bottom_box_fm").show();
    $(".bottom_box_btn").hide();
    $(".common_sigle_btn").hide();
    var uc_path = commonurl_front + "home_fm.html";
    var uc_id = "wxtb";
    //1014 在线微投1034 保代微投不走uc
    if(is_uc==null&&mode!='1014'&&mode!='1034'&&mode!='1051'&&mode!='1041'){
        uc_tooken(commonurl,uc_path,uc_id,true,"false");
    }else{
        loading_home(sales_agent)
    }
} else {
    // 客户端
    $(".yx_home").show();
    if (is_family == '1') {
        $(".bottom_box_btn").show();
        $(".bottom_box_fm").hide();
        $(".common_sigle_btn").hide();
        $("#index").css("top", '1.8rem');
    } else {
        $(".common_sigle_btn").show();
        $(".bottom_box_btn").hide();
        $(".bottom_box_fm").hide();
        loading_home(sales_agent)
    }
    // 20191105-探针加分享出去的客户点击
    try {
        if (hxcjs.getUrlString("openid_gv")) {
            _hxa.push(["setIdentity", "openid", hxcjs.getUrlString("openid_gv")]);
        }
    } catch (err) {
        console.log(err)
    };
}
//syx-营销首页改造
if (filurl[1] == "YINGXIAO" || filurl[1] == "EMT") {
    $("#index").css("paddingBottom", "2.2rem");
    if (productId) {
        // 营销
        if (!is_agent) {
            // 客户端首页
            if (is_family == '1') {
                $("#theretitle").show();
                $("#top_home").show();
                $("#thetitle").remove();
            } else {
                // 客户端首页
                $(".yx_home").show();
                $("#thetitle").show();
                $("#theretitle").remove();
            }
        } else {
            // 业务员首页
            $(".yx_home").show();
            $("#thetitle").show();
            $("#theretitle").remove();

        }
    } else {
        if(!is_agent){
            // 客户端首页
            if(is_family == '1'){
                $("#fourtitle").show();
                $("#top_home").show();
                $("#twotitle").remove();

            }else{
                $(".yx_home").show();
                $("#twotitle").show();
                $("#fourtitle").remove();
            }
        }else{
            // 业务员首页
            $(".yx_home").show();
                $("#twotitle").show();
                $("#fourtitle").remove();
        }
        $(".yxhomebox").css("marginBottom", "1.8rem");
    }
} else {
    $("#index").css("height", $(window).height() - $(".bottom_box").height());
}
function yxhome() {
    if (filurl[1] == "YINGXIAO" || filurl[1] == "EMT") {
        $("#index").css("height", $(window).height() - $(".bottom_box").height());
        $(".yxhomebox").html("");
        $(".yxhomebox").append('<div class="lpbox yx_home"><img src="images/lpbox.jpg"></div><div class="quest_box yx_home"><img src="images/cjwt.jpg" style="margin-left:-0.4rem;"><ul>    </ul></div>')
        $(".yx_home").show();
        if (productId) {
            // 常见问题
            $.ajax({
                type: "post",
                url: commonurl + "queryCommonProblem",
                data: JSON.stringify({
                    "productId": productId
                }),
                contentType: "application/json",
                success: function (data) {
                    // if (data.result_code == 0) {
                    if (data.problems) {
                        for (var i = 0; i < data.problems.length; i++) {
                            product_name = data.problems[i].product_name
                            $(".quest_box ul").append('<li><div class="quest_boxs"><img class="quest_icon" src="images/quest.jpg"><div class="quest_info">' + data.problems[i].problem + '</div><img class="quest_up" src="images/icon_arrow_bottom.png"></div><div class="answer">' + data.problems[i].answer + '</div></li>')
                        }
                        $(".quest_box .quest_boxs").click(function () {
                            if ($(this).next(".answer").css("display") == "none") {
                                $(this).find(".quest_up").css("transform", "rotate(180deg)");
                                $(this).next(".answer").show();
                                var tagname = $(this).next(".answer").children().attr("tagName");
                                $(this).next(".answer").children(tagname).eq(0).prepend('<img class="quest_icon answer_icon" src="images/answer.jpg">');
                            } else {
                                var tagname = $(this).next(".answer").children().attr("tagName");
                                $(this).next(".answer").children(tagname).eq(0).find(".quest_icon").remove();
                                $(this).find(".quest_up").css("transform", "rotate(0deg)");
                                $(this).next(".answer").hide();
                            }
                        })
                    }
                    funcReadImgInfo()
                    // } else {
                    //     $("#thetitle").remove();
                    //     $("#theretitle").show();
                    //     $(".quest_box").hide();
                    //     $(".selectspan").eq(0).show();
                    //     productId = null;
                    //     $("#index").css("paddingBottom", "1.8rem");
                    // }
                }
            })
        } else {
            $(".quest_box").hide();
            $("#index").css("paddingBottom", "1.8rem");
        }
        var topclick = 0;
        $(".selectspan").eq(0).show();
        $(".toptitle").click(function () {
            $(".toptitle").removeClass("topselect");
            $(".selectspan").hide();
            $(this).addClass("topselect");
            $(this).find(".selectspan").show();
            if (productId) {
                // 营销
                if (!is_agent) {
                    if ($(this).index() == "0") {
                        topclick = 1;
                        $("#index").scrollTop(0);
                    } else if ($(this).index() == "1") {
                        var imgheight = $("#top_home").height();
                        console.log('imgheight',imgheight)
                        topclick = 2;
                    } else if ($(this).index() == "2") {
                        var imgheight = $("#top_home").height() + $("#pro_img").height();
                        console.log('啥玩意儿2', imgheight)
                        $("#index").scrollTop(imgheight);
                        topclick = 3;
                    } else if ($(this).index() == "3") {
                        var imgheight = $("#top_home").height() + $("#pro_img").height() + $(".lpbox").height();
                        $("#index").scrollTop(imgheight - 10);
                        topclick = 4;
                    }
                    console.log('topclick',topclick)
                } else {
                    if ($(this).index() == "1") {
                        var imgheight = $("#pro_img").height();
                        $("#index").scrollTop(imgheight);
                        topclick = 2;
                    } else if ($(this).index() == "2") {
                        var imgheight = $("#pro_img").height() + $(".lpbox").height();
                        $("#index").scrollTop(imgheight - 10);
                        topclick = 3;
                    } else if ($(this).index() == "0") {
                        topclick = 1;
                        $("#index").scrollTop(0);
                    }
                }
            } else {
                if (!is_agent) {} else {

                }
            }

        })
        //监听滚动事件
        document.getElementById('index').onscroll = function () {
            var topheight = $("#top_home").height(); //客户端
            var imgheight = $("#pro_img").height(); //长图
            var lpboxheight = $(".lpbox").height(); //常见问题
            if (!productId) {
                if ($("#index").scrollTop() < imgheight) {
                    if (topclick == 2) {
                        $(".toptitle").eq(1).addClass("topselect");
                        $(".toptitle").eq(1).find(".selectspan").show();
                        return;
                    }
                    if ($(".toptitle").eq(0).attr("class") == "toptitle toptitles topselect") {
                        return;
                    }
                    $(".toptitle").removeClass("topselect");
                    $(".selectspan").hide();
                    $(".toptitle").eq(0).addClass("topselect");
                    $(".toptitle").eq(0).find(".selectspan").show();
                }
                if ($("#index").scrollTop() >= imgheight) {
                    if ($(".toptitle").eq(1).attr("class") == "toptitle toptitles topselect") {
                        return;
                    }
                    $(".toptitle").removeClass("topselect");
                    $(".selectspan").hide();
                    $(".toptitle").eq(1).addClass("topselect");
                    $(".toptitle").eq(1).find(".selectspan").show();
                }
            } else {
                if (!is_agent) {
                    if ($("#index").scrollTop() < topheight) {
                        if ($(".toptitle").eq(1).attr("class") == "toptitle toptitlets topselect") {
                            return;
                        }
                        $(".toptitle").removeClass("topselect");
                        $(".selectspan").hide();
                        $(".toptitle").eq(0).addClass("topselect");
                        $(".toptitle").eq(0).find(".selectspan").show();
                    }
                    if ($("#index").scrollTop() >= topheight && $("#index").scrollTop() < (imgheight + topheight)) {
                        if ($(".toptitle").eq(2).attr("class") == "toptitle toptitlets topselect") {
                            return;
                        }
                        $(".toptitle").removeClass("topselect");
                        $(".selectspan").hide();
                        console.log('鱼摆摆长图2')
                        $(".toptitle").eq(1).addClass("topselect");
                        $(".toptitle").eq(1).find(".selectspan").show();
                    }
                    if ($("#index").scrollTop() >= topheight + imgheight && $("#index").scrollTop() < (imgheight + lpboxheight)) {
                        if ($(".toptitle").eq(3).attr("class") == "toptitle toptitlets topselect") {
                            return;
                        }
                        $(".toptitle").removeClass("topselect");
                        $(".selectspan").hide();
                        $(".toptitle").eq(2).addClass("topselect");
                        $(".toptitle").eq(2).find(".selectspan").show();
                    }
                    if ($("#index").scrollTop() > (topheight + imgheight + lpboxheight)) {
                        if ($(".toptitle").eq(4).attr("class") == "toptitle toptitlets topselect") {
                            return;
                        }
                        $(".toptitle").removeClass("topselect");
                        $(".selectspan").hide();
                        $(".toptitle").eq(4).addClass("topselect");
                        $(".toptitle").eq(4).find(".selectspan").show();
                    }
                } else {
                    if ($("#index").scrollTop() < imgheight) {
                        if ($(".toptitle").eq(0).attr("class") == "toptitle toptitlets topselect") {
                            return;
                        }
                        $(".toptitle").removeClass("topselect");
                        $(".selectspan").hide();
                        if (topclick == 3) {
                            $(".toptitle").eq(1).addClass("topselect");
                            $(".toptitle").eq(1).find(".selectspan").show();
                        } else {
                            $(".toptitle").eq(0).addClass("topselect");
                            $(".toptitle").eq(0).find(".selectspan").show();
                        }
                    }
                    if ($("#index").scrollTop() >= imgheight && $("#index").scrollTop() < (imgheight + lpboxheight)) {
                        if ($(".toptitle").eq(1).attr("class") == "toptitle toptitlets topselect") {
                            return;
                        }
                        $(".toptitle").removeClass("topselect");
                        $(".selectspan").hide();
                        if (topclick == 3) {
                            $(".toptitle").eq(2).addClass("topselect");
                            $(".toptitle").eq(2).find(".selectspan").show();
                        } else {
                            $(".toptitle").eq(1).addClass("topselect");
                            $(".toptitle").eq(1).find(".selectspan").show();
                        }
                    }
                    if ($("#index").scrollTop() > (imgheight + lpboxheight)) {
                        if ($(".toptitle").eq(2).attr("class") == "toptitle topselect") {
                            return;
                        }
                        $(".toptitle").removeClass("topselect");
                        $(".selectspan").hide();
                        $(".toptitle").eq(2).addClass("topselect");
                        $(".toptitle").eq(2).find(".selectspan").show();
                    }
                }

            }
        };
    }
}

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

3条回答默认最新

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
Kwan的解忧杂货铺@新空间代码工作室 2024-06-03 14:06
关注
下午好🌅🌅🌅
本答案参考ChatGPT-3.5

根据您提供的CSS和HTML代码，苹果手机上的tab显示异常可能是由于以下几个原因导致的：

CSS兼容性问题：iOS设备可能对某些CSS属性有不同的解析或默认样式。尝试将display: none;从.yx_home类中移除，因为这可能导致它在苹果手机上被隐藏。

修改后的CSS：

.yx_home { /* 移除 display: none; */ }

Flexbox布局问题：确保.topbox中的justify-content: space-around;对苹果设备也有效。如果需要，可以考虑使用其他布局方式，如justify-content: flex-start; 或 justify-content: flex-end;。

屏幕适配：苹果设备通常有不同的屏幕尺寸，可能需要为不同尺寸添加媒体查询来调整布局。例如，你可以为iPhone和iPad分别设置不同的CSS规则。

定位问题：检查.topselect和.selectspan的绝对定位是否适用于所有设备。你可以在.selectspan的left属性中使用百分比值而不是固定像素值。

JavaScript问题：检查is_agent、is_family等条件判断是否正确处理了苹果设备的逻辑。确保在苹果设备上正确显示内容。

兼容性库：如果使用了第三方库，确保它们在iOS上也是兼容的。

针对以上问题，你可以按照以下步骤操作：

[ ] 删除 .yx_home 的 display: none;
[ ] 检查并调整 .topbox 的 justify-content 属性
[ ] 添加媒体查询以适应不同尺寸的苹果设备
[ ] 调整 .selectspan 的 left 值为百分比
[ ] 确保 is_agent 和 is_family 判断逻辑正确
[ ] 检查并修复可能存在的第三方库兼容问题

完成上述步骤后，尝试在苹果手机上查看页面，看看问题是否解决。如果问题仍然存在，可能需要进一步调试代码或寻找其他可能的原因。
本回答被题主选为最佳回答 , 对您是否有帮助呢?

解决无用
评论打赏
分享
举报编辑记录

评论

按下Enter换行，Ctrl+Enter发表内容

查看更多回答(2条)

报告相同问题？

关注问题

PYQT5中修改tab的标题
2018-07-03 03:32

回答 3 已采纳在qt designer中的QTabWidget属性框中的currentTabText处更改
bootstrap下多Tab echarts切换tab不显示 bootstrap echarts php
2022-06-19 23:07

回答 9 已采纳首先看看js版本问题然后看看是不是jquery和bootstrap两个js的引入顺序的问题如果解决不了，试试下面解决方法： 1、全局定义一个echarts数组，用于存放echarts var my
Echarts vue tab切换后不显示 html5 javascript vue.js 有问必答
2021-06-18 16:18

回答 2 已采纳你打包完，不放云上可以正常运行吗?
Python菜鸟快乐游戏编程_pygame
2020-11-08 13:01

python机器学习建模的博客游戏只是别人写好程序，与其沉迷于他人设计好程序，为何不自己设计游戏，至少学会编程后，我们的月收入上万不是问题。于是便有了录制这部pygame菜鸟游戏编程教程动力。不要沉迷于游戏，我们人生还有许多事情要做，...
layui的tab标签页显示问题 css javascript jquery
2021-04-30 11:59

回答 1 已采纳 kao,我自己调试的时候把默认隐藏给删了。。。 .layui-tab-item { display: none; }
tab切换效果样式修改 elementui vue.js
2023-03-21 18:44

回答 1 已采纳可以用伪类元素模拟 el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active:after { content: ''
element-ui中tab切换通过状态判断显示？ elementui javascript
2021-12-14 14:16

回答 1 已采纳如有帮助请点采纳！！ //在下面这个函数中能打印出当前tab索引，根据索引判断要显示数据 methods: { handleClick(tab, event) { con
Java语言基础
2021-04-27 22:30

So Young007的博客 java是一个强类型的语言,数据类型明确计算机中基本的存储单位: 字节最小单位: 比特位 1byte = 8bit 基本数据类型 : 4类八种整型字节型 byte 1字节=8位 2^8->[-128,127] 短整型...
Tab标签底部显示,weight均分
2016-03-01 12:47

回答 4 已采纳 http://blog.csdn.net/wwj_748/article/details/44224945
页面显示的间距如何修改 vue.js 前端框架
2022-03-15 13:53

回答 3 已采纳改下这个值，看是不是这个值影响的
Qt tabwidget 如何动态添加tab页 qt
2018-01-15 13:27

回答 5 已采纳帮助文档中提供了下面这两个函数可以动态添加得 int addTab(QWidget *page, const QString &label)； int addTab(QWidget *page,
翻车？iPhone12这些问题，你有吗？
2020-11-17 20:04

网易智能的博客来源｜好机友作者｜机哥现在，本年度所有 iPhone 新机都已经发售。随着到货和上手，iPhone 12 系列留给我们的悬念，越来越少。新机销量算是一个悬念，具体数据是来不及算进苹果第四...
一个websocket画面，tab复制开发语言
2022-03-11 09:25

回答 1 已采纳打开浏览器devtools，网络面板上可以查看连接了几个websocket。
Shell脚本语言笔记
2022-08-08 12:29

123无敌，就你了的博客 Shell脚本语言笔记
编程心得分享，送给刚入门学编程的小伙伴
2019-08-30 11:26

DreamCoders的博客下面给大家分享下，众多小伙伴的编程心得，希望对你有所帮助。这篇文章我是在知乎上看到的，感觉很不错。原作者回顾了自己漫长的编程学习之路，从中总结了许多个人经历，走的弯路，和教训。我摘抄了过来，希望能...
没有解决我的问题, 去提问

问题事件

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
系统已结题 7月5日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
已采纳回答 6月27日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
创建了问题 6月3日

悬赏问题

¥15 问题遇到的现象和发生背景 360导航页面千次ip是20元，但是我们是刷量的超过100ip就不算量了，假量超过100就不算了这是什么逻辑呢有没有人能懂的 1000元红包感谢费
¥30 计算机硬件实验报告寻代
¥15 51单片机写代码，要求是图片上的要求，请大家积极参与，设计一个时钟，时间从12:00开始计时，液晶屏第一行显示time，第二行显示时间
¥15 用C语言判断命题逻辑关系
¥15 原子操作+O3编译，程序挂住
¥15 使用STM32F103C6微控制器设计两个从0到F计数的一位数计数器（数字），同时，有一个控制按钮，可以选择哪个计数器工作：需要两个七段显示器和一个按钮。
¥15 在yolo1到yolo11网络模型中，具体有哪些模型可以用作图像分类？
¥15 AD9910输出波形向上偏移，波谷不为0V
¥15 淘宝自动下单XPath自动点击插件无法点击特定<span>元素，如何解决？
¥15 曙光1620-g30服务器安装硬盘后看不到硬盘

苹果手机tab显示异常怎么修改

3条回答 默认 最新

问题事件

悬赏问题

3条回答默认最新