ios - CSS output on iphone different from PC -
so, allow me tell problem straight point. i'm developing website right now. , seek visit website i'm developing on iphone. problem is, got different output when visit site pc , when visit iphone. this image when visit pc's chrome , output same other browser in pc while this when visit iphone's safari , output same when visit iphone's chrome . see difference betwwem visit iphone , pc? yep. got "space" above navigation bar while visiting iphone. can help me solve problem? lot in advance.
btw css
class="snippet-code-css lang-css prettyprint-override">body { background: rgb(25, 181, 254); margin: 0px; font-family: "trebuchet ms", helvetica, sans-serif; } #header { width: 100%; min-width: 1050px; height: 150px; margin-bottom: 20px; text-align: center; } #logobox { display: inline-block; width: 300px; height: 150px; overflow: hidden; } #logobox:active { height: 140px; margin: 5px auto; } .logo { background: url('img/icon/logo.png') no-repeat; width: 300px; height: 100%; } #navbox { width: 150px; height: 150px; overflow: hidden; display: inline-block; } .transition { transition: height 0.15s, margin 0.15s, background 0.7s; -webkit-transition: height 0.15s, margin 0.15s, background 0.7s; -o-transition: height 0.15s, margin 0.15s, background 0.7s; -ms-transition: height 0.15s, margin 0.15s, background 0.7s; -moz-transition: height 0.15s, margin 0.15s, background 0.7s; } #navbox:active { height: 140px; margin-bottom: 5px; } #navbox.green { background: rgb(80, 190, 106); } #navbox.orange { background: rgb(250, 170, 30); } #navbox.green:hover { background: rgb(4, 160, 114); } #navbox.orange:hover { background: rgb(240, 130, 20); } #iconbox { height: 53.4%; width: 100%; margin-top: 13.4%; text-align: center; } #iconborder { width: 70px; height: 70px; border-radius: 40px; border: 5px solid rgb(255, 255, 255); } img.icon { width: 50px; height: 50px; margin-top: 10px; } a.nav { display: inline-block; text-decoration: none; } #navprop { width: 100%; height: 33.3%; color: rgb(255, 255, 255); text-align: center; font-weight: bold; font-size: 25px; margin-top: 6.7%; } .center{ margin-left:auto; margin-right:auto; }
and html class="snippet-code-html lang-html prettyprint-override"><html> <head> <title>welcome sirius</title> <?php require_once "theme.php"; ?> </head> <body> <div id="header"> <a href="index.php" class="nav"> <div id="logobox" class="transition"> <img src="img/icon/logo.png" class="logo"> </div> </a> <!-- --> <a href="index.php" class="nav"> <div id="navbox" class="green transition"> <div id="iconbox"> <div id="iconborder" class="center nav"> <img src="img/x.gif" class="icon home"> </div> </div> <div id="navprop">home</div> </div> </a> <!-- --> <a href="aboutus.php" class="nav"> <div id="navbox" class="orange transition"> <div id="iconbox"> <div id="iconborder" class="center nav"> <img src="img/x.gif" class="icon aboutus"> </div> </div> <div id="navprop">about us</div> </div> </a> <!-- --> <a href="register.php" class="nav"> <div id="navbox" class="green transition"> <div id="iconbox"> <div id="iconborder" class="center nav"> <img src="img/x.gif" class="icon register"> </div> </div> <div id="navprop">register</div> </div> </a> <!-- --> <a href="login.php" class="nav"> <div id="navbox" class="orange transition"> <div id="iconbox"> <div id="iconborder" class="center nav"> <img src="img/x.gif" class="icon login"> </div> </div> <div id="navprop">login</div> </div> </a> <!-- --> <a href="admin.php" class="nav"> <div id="navbox" class="green transition"> <div id="iconbox"> <div id="iconborder" class="center nav"> <img src="img/x.gif" class="icon admin"> </div> </div> <div id="navprop">admin</div> </div> </a> </div> </body> </html>
apologies cant see images work blocking content :p
im guessing here beingness specified browser, have not margins etc. seek using reset.css file or maybe using debugging (f12) on desktop , pretend phone debug. (i'm pretty sure in chrome can specify phone browser type be, im assuming modern browsers have emulation mobile)
or min-width: 1050px; if designing responsive design might want create @media queries.
[edit] notice have nil specifying html. perhaps browser adding css against html tag? html {margin:0; padding:0;}
ios css iphone browser
No comments:
Post a Comment