So my website has all of what everyone says to add when it comes to the head area:
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
However it doesn't work.
Instead, I'm getting this zoomed-in website that has the scroll bar on the right side(supposed to) AND one on the bottom (it isn't supposed to have a scroll bar on the bottom.)
Some perhaps useful info:
width:1920px
height: 3742px
IMAGE LINK:
https://ibb.co/W53qHnq
Code:
https://docs.google.com/document/d/1FpUiJsbVPp5Q33sa91lMJ9QYMU1cf8jHwkmlnzP33Y8/edit?usp=sharing
IMHO, the problem is your background image is too big, exceeding the viewport. You need to style the image to fit in the viewport. Exact code depends on your current image code, please provide.
Also, set overflow: hidden on the wrapper/container of the image to hide both scrollbars or overflow-x: hidden to hide just the horizontal scrollbar.
Related
The site I created makes an unnecessary large width on the page. The page is supposed to fit to the screen of a mobile phone. But I seem to have to scroll to the right for nothing. This is the site: https://gwenlotest.000webhostapp.com/index.html
it works perfectly on big screens but as soon as I open the site on mobile websites I have to scroll to get to the burger menu and I don't understand why.
It is caused because of the elements that animate from the right. Look into putting them in another div that wraps these elements. The div will should have 100% width.
As you might notice, as you scroll down, when the elements animate from the right edge of the screen, the right extension disappears.
Add shrink-to-fit=no to your meta name="viewport" so it should be in the form
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
i think that should fix the issue.
When on a desktop/laptop, if you zoom in on a website, the text (and entire page) adjusts to fit the screen. However, when you zoom in on mobile, you instead scroll horizontally, and no elements adjust for the new zoom.
Why is this? Is there any way to make mobile browsers mimic the behavior of desktop browsers so that the webpage adjusts to the zoom?
The relevant parts of my <head> tag:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
I'm also using Bootstrap CSS.
Regular zoom on mobile:
Regular zoom on mobile
Current behavior on mobile (page is cropped, horizontal scrolling enabled):
Current behavior on mobile
Desired behavior on mobile (aka current behavior on desktop). Margins adjust to fit new screen width:
Desired behavior
Possible duplicate of HTML - Prevent horizontal scrolling when zooming in on mobile
To achieve that, in css of body tag, set overflow to `. Also Refer
body{
font-size:100px;
overflow:hidden;
}
<body>asdklajflksjfklaklsjklsfajklasjflkajfalshgkdhioqwefmahlashjfdhkjhaslkfhlakjhldhlkjhfsajlkhalksj</body>
My website has white empty space on the right side, on a iphone for landscape (on Chrome). I tried adding this in the head section(but its not helping):
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
wrapper has 100% width
for portrain it's ok, but foe landscape appear white space
attach sreenshots
It's very possible that you have an overflowing element on the right side. Maybe a fly-out navigation, or maybe just an errant element. If you can SCROLL horizontally to it, there's a great chance that this is your issue.
If you are having trouble finding it, try Firefox's 3d view. I use that junk all of the time to find those sneaky overflowing elements.
GOAL:
a div is
{ position:fixed; bottom:0% }
it has a real height and width; the z-index is the highest in the document
= therefore it should be visible everytime!
PROBLEM:
mobile browsers 'cut' the bottom end of the page when zooming out.
but this also cuts my div! While zooming in or out, I can see how the bottom-border makes the div appear/disappear.
MY INTERPRETATION:
it looks to me like the body of the page has an overflow:hide and my fixed div is pushed outside the area of the body when zooming out.
unfortunately, I can't change the body(I only inject the div into an existing site and have no connection with the code of this page)
Would be happy with any explanations/&suggestions/&ideas!
thanks.
EDIT
I checked the height of the viewport, the html-document and the finally visible amount of css-pixel when zoomed out to maximum:
1440 document.documentElement.clientHeight
1486 document.documentElement.offsetHeight
1566 window.innerHeight
so,the mobile devices seem to 'cut' the fixed-div, because it's OUTSIDE THE HTML !?!
EDIT 2
I deactivated the existing <meta name="viewport" content="width=device-width, initial-scale=1"> (not a real option for later) and saw, that now also my dev-tools in chrome show the 'end' of the hmtl/body. Everything what is more south is not visible; instead of I get a very empty whitespace.
Try adding this line as the first line after head starts
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I want to be able to zoom in on and scroll an image but not have it affect buttons floating on top. Is this possible?
I've had success with scrolling and zooming by setting the html's viewport meta tag:
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.1, minimum-scale=1.1, maximum-scale=1.8, user-scalable=yes"/>