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>
Related
I'm working on a web application that's meant to be used exclusively on phones (of various sizes). The application includes various buttons that I resize based on the user's screen size so that we maximize the use of horizontal and vertical space.
I have specified a few media queries for responding to both the horizontal and vertical layout changes using tailwind (see below):
screens: {
'sm': '340px',
'md': '360px',
'lg': '385px',
'xl': '640px',
'2xl': '1024px',
"tall": { 'raw': '(min-height: 740px)' },
"vtall": { 'raw': '(min-height: 800px)' }
}
These all work when looking at the display on my desktop with dev tools. The view is changing based on vertical and horizontal size changes.
The issue is when I use an actual mobile device, I notice that my application is consistently ignoring the vertical media queries.
I've isolated the issue to this line:
<meta name="viewport" content="width=device-width, initial-scale=1, height=device-height"></meta>
When I make my line...
<meta name="viewport" content="height=device-height"></meta>
The vertical media query works, but not the horizontal.
But the moment I add the width specification back in... the vertical media query doesn't work, but the horizontal one does.
Any ideas?
I'm not sure if it would make any difference, but you don't need to close the meta tag, what you want is
<meta name="viewport" content="width=device-width, initial-scale=1, height=device-height">
Can you start a codepen or jsfiddle that illustrates your problem?
I have made a non-respnsive site using the below viewport:
<meta name="viewport" content="width=1400">
It is showing the desktop view on both desktop and mobile without any issues.
But when I resize the browser, the page goes beyond the screen horizontally. Which is the expected behaviour.
Is there some CSS or script which I can use to make the page full width when we resize the screen too so that the screen will show full width and height will decrease just like on mobile?
I used the below CSS to make it happen:
body {
width: 100%;
}
But it breaks the layout when resizing the screen.
Can anyone point where I made the mistake?
Thank you.
If you want control on diffrent viewport you must be add this below meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
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.
Why is one of my divs not resizing/being responsive on mobile?
Only one of the divs has a fixed font size, whereas all the other are responsive when using mobile :
Site viewable here :
https://metriculous.network/
You need to add the below to your <head>.
This would help correct the scaling of elements. (your button had the issue with scaling, causing the div to scale lower than other elements in the page)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I want to force browser, to set virtual viewport to a fixed value.
Typically the meta viewport in responsive page looks like:
<meta name="viewport" content="width=device-width, initial-scale=1">
i found a solution to set width to fixed value:
<meta name="viewport" content="width=1200px">
But unfortunately it works well only in chrome. What i want to get is with width lower than 1200 i want to turn on the zooming functionality.
Does anybody knows any other trick to do it?
EDIT
Actually the problem is, that i managed almost all layouts with bootstrap to achieve responsiveness. But client decided, that he don't want this page to be responsive, but make the width fixed regardless of device width and toggle horizontal and vertical scrollbars if needed.
What i am looking for is a realy easy warkaround, to do this without hudge style modifications.
Give this a try in jQuery:
if(screen.width < 1200){
$("meta[name=viewport]").attr("content", "width=device-width, initial-scale=1, user-scalable=yes");
}