Question

我最近一直在试验jQuery并且做了一个popupmenu。弹出div的位置在我显示或窗口调整大小时计算。

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

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

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

＆＃13;

            $(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();
            }

＆＃13;

* {
    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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

向您的css添加媒体查询，如下所示：

 UIGraphicsBeginImageContextWithOptions(size, false, UIScreen.mainScreen().scale)

请参阅小提琴https://jsfiddle.net/DIRTY_SMITH/rh6w934n/

Answer 2

有多种方法可以解决这个问题。您可以使用响应式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
}

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

Answer 3

以下是对您的代码段的一点调整

＆＃13;

	$(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);
		});					
	});

	function showPopup() {
		$(".popup").fadeIn(300);
	}

	function hidePopup(delay) {
		if (typeof(delay) === 'undefined') {
			delay = 1000;
		}
		$(".popup").fadeOut(delay);
	}

	function togglePopup() {
		$(".popup").toggle();
	}

＆＃13;

* {
    box-sizing: border-box;
}

html, body {
    margin: 0px;
    padding: 0px;
}

.container {
    border: 1px solid black;
    margin: 50px auto;
    height: auto;
    position: relative;    
    border-radius: 2px;
    padding: 10px;
    padding-top: 25px;
}
@media only screen and (min-width: 540px) {
	.container {
		width: 500px;
	}
}
@media screen and (max-width: 539px) {
	.container {
		width: calc(100% - 20px);
		margin: 20px auto;
	}
}

.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 {
	position: absolute;
	top: 2em;
	right: 0;
}
.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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<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 class="popup">
			<div class="closebtnholder">
				<div class="closebutton">[x]</div>
			</div>
			<a href="http://google.be">google</a>
		</div>			
	</div>

＆＃13;

移动设备上元素的位置不同于桌面上的元素

3 个答案: