个人中心
gpt4 book ai didi

javascript - 元素在移动设备上的位置与桌面上的不同

转载 作者：行者123 更新时间：2023-11-28 07:11:47 25 4
gpt4 key购买 nike

我最近一直在尝试使用 jQuery 并制作了一个弹出菜单。弹出 div 的位置是在我显示它或调整窗口大小时计算的。

我注意到去定位在移动设备上无法正常工作，并且弹出式 div 显示在右侧太多。

为什么这个弹出式 div 在移动设备上的显示方式与在桌面设备上的显示方式不同？

下面是一个在台式电脑上运行良好的工作示例，这里有 2 张图片显示了在移动设备上出现的问题:

wrong position of popup div wrong position of popup div 

            $(document).ready(function () {
                $(".button").mouseover(function () {
                    showPopup();
                });
        
                var timeout;
                $(".popup").mouseleave(function () {
                    timeout = setTimeout(function () {hidePopup(500);}, 500);                    
                });
                
                $(".popup").mouseenter(function () {
                    clearTimeout(timeout);                   
                });
                
                $(".button").click(function () {
                    togglePopup();
                });
                
                $(".closebutton").click(function () {
                    hidePopup(0);
                });
                
                $(window).resize(function () {
                    positionPopup();
                });
                                
            });
            
            function positionPopup() {
                var pos = $(".button").offset();
                var h = $(".button").height();
                var w = $(".button").width();
                
                var widthPopUp = $(".popup").width();
                var heightPopUp = $(".popup").height();
                
                $(".popup").css({left: pos.left -  widthPopUp - 20 - 3 + w, top: pos.top + h + 10});         
            }
            
            function showPopup() {
                positionPopup();
                $(".popup").fadeIn(300);
            }
            
            function hidePopup(delay) {
                if (typeof(delay) === 'undefined') {
                    delay = 1000;
                }
                $(".popup").fadeOut(delay);
            }
            
            function togglePopup() {
                positionPopup();
                $(".popup").toggle();
            }
* {
    box-sizing: border-box;
}

html, body {
    margin: 0px;
    padding: 0px;
}

.container {
    width: 500px;
    border: 1px solid black;
    margin: 50px auto;
    height: auto;
    position: relative;    
    border-radius: 2px;
    padding: 10px;
    padding-top: 25px;
}

.buttonholder {
    height: 20px;
    width: 20px;
    text-align: center;
    line-height: 15px;
    right: 0px;
    top: 0px;
    position: absolute;
    margin: 3px;
    display: block;
}

.button {
    cursor: pointer;
}

.popup{
    border: #DDDDDD 1px solid;
    width: 200px;
    height: 40px;
    display: none;
    position: absolute;
    background-color: white;
    padding: 10px;
    border-radius: 2px;
}

.closebtnholder {
    position: absolute;
    top: 0px;
    right: 0px;
    margin: 3px;
    text-align: center;
}

.closebutton {
    cursor: pointer;
    font-size: 10pt;
}

.popup::after {
  border-bottom: 8px solid #DDDDDD;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  width: 0;
  height: 0;
  content: "";
  display: block;
  position: absolute;
  top: -8px;
  left: 184px;
}
<!DOCTYPE html>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="layout.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>        
     </head>
     
    <body>
        <div class="container">
            
            <div class="buttonholder">
                <div class="button">[?]</div>
            </div>
            
            Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard 
            proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters 
            nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen 
            overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 
            populair geworden met de introductie van Letraset vellen met Lorem Ipsum passages en meer recentelijk 
            door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.
            
        </div>
        
        <div class="popup">
            <div class="closebtnholder">
                <div class="closebutton">[x]</div>
            </div>
            <a href="http://google.be">google</a>
        </div>
        
        <div class="triangle">
            
        </div>
        
    </body>
</html>

最佳答案

有多种方法可以解决这个问题。您可以使用响应式 css 框架，例如 twitter bootstrap，或者您可以创建一个新的样式表来覆盖当前的样式表(当它是移动设备时)。

使用 PHP 有点像这样:

<link rel="stylesheet" type="text/css" href="/css/main.css" />
<?php
$isMobile = (bool)preg_match('#\b(ip(hone|od|ad)|android|opera m(ob|in)i|windows (phone|ce)|blackberry|tablet'.
    '|s(ymbian|eries60|amsung)|p(laybook|alm|rofile/midp|laystation portable)|nokia|fennec|htc[\-_]'.
    '|mobile|up\.browser|[1-4][0-9]{2}x[1-4][0-9]{2})\b#i', $_SERVER['HTTP_USER_AGENT'] );
if($isMobile){ ?>
    <link rel="stylesheet" type="text/css" href="/css/mobile.css" />
<?php } ?>

然后在您的 mobile.css 中，为您的移动页面添加样式。 

.container {
width: 300px;  //this will overwrite your old one
}

澄清一下，这是一个简单的修复，但我强烈建议学习响应式框架。从长远来看，这将为您节省大量时间。

关于javascript - 元素在移动设备上的位置与桌面上的不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32594836/

25 4 0
文章推荐： ios - Swift - UIAlertController 没有显示任何内容
文章推荐： javascript - 如何在用户提交表单后显示成功消息
文章推荐： ios - 使用 AVPlayer 在 iOS 中播放音频流期间的播放速度
文章推荐： javascript - Rails 4 - Application.js 包含 merge 冲突，不知道如何解决它们
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com