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

Question

I have lately been experimenting with jQuery and made sort of a popupmenu.我最近一直在试验 jQuery 并制作了一个弹出菜单。 The position of the popup div is calculated when I show it or when the windows resizes.当我显示它或调整窗口大小时，会计算弹出 div 的位置。

I noticed that de positioning doesn't work correctly on mobile devices and the popup div is shown too much to the right.我注意到 de 定位在移动设备上无法正常工作，并且弹出 div 显示在右侧太多。

Why is this popup div shown differently on mobile devices than on a desktop?为什么此弹出 div 在移动设备上的显示方式与在台式机上的显示方式不同？

Below is a working example which works fine on a desktop pc and here are 2 images that show what goes wrong on a mobile device:下面是一个在台式电脑上运行良好的工作示例，这里有 2 张图片显示了移动设备上的问题：

 $(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>

Answer 1

Add a media query to your css like this:将媒体查询添加到您的 css 中，如下所示：

@media (max-width: 480px){
   .container {
    width: calc(100% - 50px);
    border: 1px solid black;
    margin: 50px auto;
    height: auto;
    position: relative;    
    border-radius: 2px;
    padding: 10px;
    padding-top: 25px;
}

see fiddle https://jsfiddle.net/DIRTY_SMITH/rh6w934n/见小提琴https://jsfiddle.net/DIRTY_SMITH/rh6w934n/

Answer 2

there are multiple ways to fix this.有多种方法可以解决这个问题。 You can use a responsive css framework such as twitter bootstrap or you can create a new style sheet to overwrite your current one when it is a mobile device.您可以使用响应式 css 框架，例如 twitter bootstrap，或者您可以创建一个新的样式表，当它是移动设备时覆盖当前的样式表。

Kinda like this using PHP:使用 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 } ?>

Then in your mobile.css, put your styling for your mobile pages.然后在您的 mobile.css 中，为您的移动页面添加样式。

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

Just to clarify, this is a simple fix but I highly suggest learning a responsive framework.澄清一下，这是一个简单的修复，但我强烈建议学习一个响应式框架。 It will save you a lot of time in the long run.从长远来看，它将为您节省大量时间。

Answer 3

Here is a little adjustment to your snippet这是对您的代码段的一些调整

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

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

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

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

问题描述

3 个解决方案

解决方案1
0 2015-09-15 20:30:12

解决方案2
0 2015-09-15 20:30:29

解决方案3
0 2015-09-15 20:51:07

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

问题描述

3 个解决方案

解决方案1 0 2015-09-15 20:30:12

解决方案2 0 2015-09-15 20:30:29

解决方案3 0 2015-09-15 20:51:07

解决方案1
0 2015-09-15 20:30:12

解决方案2
0 2015-09-15 20:30:29

解决方案3
0 2015-09-15 20:51:07