stackoom
  简体   繁体   中英

Different position of element on mobile device than on desktop

 原文  2015-09-15 20:15:13  9   3    javascript/ jquery/ html/ css

Question

I have lately been experimenting with jQuery and made sort of a popupmenu. The position of the popup div is calculated when I show it or when the windows resizes.

I noticed that de positioning doesn't work correctly on mobile devices and the popup div is shown too much to the right.

Why is this popup div shown differently on mobile devices than on a desktop?

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:

弹出div的错误位置 弹出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>

3 answers

solution1
 0  2015-09-15 20:30:12

Add a media query to your css like this:

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

solution2
 0  2015-09-15 20:30:29

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.

Kinda like this using 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.

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

solution3
 0  2015-09-15 20:51:07

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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question serve different content for a mobile device than desktop Determining position of the element in JS - mobile vs. desktop Load different element or background image on mobile vs desktop Element showing on Desktop but not on Mobile Different Events for mobile and desktop Different menus for mobile/desktop Different scripts for Desktop and Mobile Forcing desktop display on a mobile device Detect user device and assign different jquery (desktop / mobile(ipad)) in js/ jquery? Input element click on mobile device browser behaves differently than in Chrome device rendering
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM