Why is my navigator scaling the page on mobile?
My site has a zoom issue in Chrome browser on Android on mobile. This does not happen in Firefox on mobile devices or in any desktop browser. When the navbar is selected and lowered, it scales the web page. Please note that the page is scaled differently depending on the selected dropdown. The navbar seems to have invisible content that breaks the frame when the dropdown behavior is enabled.
I stitched together 4 screenshots of the problem.
Help with a fix or workaround would be much appreciated.
#NavigationBarList{
list-style-type:none;
padding:0;
}
li{
font-size:130%;
}
nav a{
display:block;
}
/* This customizes the presentation of the list elements (menu items) in the navbar. */
nav li{
display:block;
font-weight:bold;
font-size:200%;
color:#7F1717;
background-color:#9E939E;
width:25%;
text-align:center;
text-decoration:none;
text-transform:uppercase;
z-index:11;
-moz-box-shadow: inset 0 0 1px #000000;
-webkit-box-shadow: inset 0 0 1px #000000;
box-shadow: inset 0 0 1px #000000;
}
nav ul{
width:100%;
}
/* Hide the sub menu items. */
nav ul ul {
display:none;
}
nav ul ul ul {
display:none
}
/* When hovered over, the CSS menu will drop down. */
nav li:hover > ul {
text-align:center;
font-size:40%;
display:block;
}
/* Don't underline links in the list elements (menu items). */
ul a {
text-decoration:none;
color:#7F1717;
}
/* Change the background color of hovered list elements. This was both active and hover... */
nav li:hover{
background-color:#625C62;
}
/* This customizes the ul elements in the sub-menu. */
nav ul ul{
position:absolute;
padding:0;
width:100%
}
nav ul ul ul{
position: absolute;
width:400%;
left:100%;
top:0;
}
#totheleft{
left:-100%;
}
nav ul ul ul li{
text-align:center;
font-size:250%;
}
/* I think this refers to the dropdown navbar location and properties. */
nav ul ul li {
position:relative;
}
<nav>
<ul id="NavigationBarList">
<li style="float:left;">Events
<ul>
<li><a href="tournaments.html">Tournaments</a></li>
<li><a href="kids_hour.html">Kid Hour</a></li>
<li><a href="calendar.html">Local Calendar</a></li>
</ul>
</li>
<li style="float:left;">Programs
<ul>
<li><a href="summer_camps.html">Summer Camps</a></li>
<li>In Schools
<ul>
<li><a href="schools.html">After School</a></li>
<li><a href="school_registration.html">Registration</a></li>
</ul>
</li>
<li><a href="instructors.html">Local Instructors</a></li>
</ul>
</li>
<li style="float:left;">Content
<ul>
<li><a href="posts.html">Posts</a></li>
<li><a href="games.html">Games</a>
</ul>
</li>
</li>
<li style="float:left;">Connect
<ul>
<li><a href="contact.html">Contact Us</a></li>
<li>Resources
<ul id="totheleft">
<li><a href="links.html">Chess</a></li>
<li><a href="go_links.html">Go</a></li>
<li><a href="xiangqi_links.html">Xiangqi</a></li>
<li><a href="shogi_links.html">Shogi</a></li>
<li><a href="backgammon_links.html">Backgammon</a></li>
</ul>
</li>
<li><a href="about us.html">About Us</a></li>
</ul>
</li>
</ul>
</nav>
source to share
The workaround I came across was to set overflow-x: hidden on my overlay. I've tried this earlier on body, but on Android, overflow-x doesn't work on body; it must be installed for the container. Apparently this is because this issue only occurred on Android. This workaround works great.
source to share
Add this to the section head
on all your pages.
<meta name="viewport" content="user-scalable=0">
Without a viewport, mobile devices will display the page at the normal desktop screen width, scaled to fit the screen.
So when you visit a web page on mobile, the view is actually scaled down to fit all of your content. When you touch the navbar, the browser tries to zoom in as well. The installation user-scalable=0
prevents this.
The downside is that your users will no longer be able to scale the website on a mobile device, but the only alternative might be to rewrite your website to use a fluid layout.
source to share
Yours <ul>
containing dropdowns has width = 100%. This means that the width will be 100% of the first relatively positioned parent (which is equal in this case <body>
). This causes an overflow on the x-axis.
You can make the width <ul>
25% and <li>
inside 100% instead of what you have where <li>
is 25%.
Providing you
/* This customizes the ul elements in the sub-menu. */
nav ul ul{
position:absolute;
padding:0;
width:25%;
}
and
/* I think this refers to the dropdown navbar location and properties. */
nav ul ul li {
position:relative;
width:100%;
}
source to share
I went to your site and quickly checked it out. I noticed that you are using absolute positioning to position your content in the center of your page. I am guessing this is the cause of your problem.
I would look at a tutorial on how to create a repeating background image and use that instead of trying to use one image without repeating. then you can center your content with field: 0 auto.
I know this is not a definite answer, but I hope it nudges you in the right direction.
source to share