I'm using following meta tags. But as you can see in the pictures from the emulator, my website swipes with all the content in it.(Img 1 is the normal case which it supposed to look like and img 2 is the version that i'm trying to resolve.) I'm using small grids in it. I have this problem only on Android devices.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
Thanks in advance.
You are having an overflowing issue, your one of the DIVs are going beyond the screen.
Check your HTML code and find out your culprit DIV. Set DIV width to 100%. I would have changed my HTML code a bit rather than using hack to prevent swiping, and hence horizontal scroll bar to appear.
Related
when I make responsive with media queries on CSS, I get auto zoomed in when opening the website on mobile, so how can I adjust the zoom or what are affecting my page?
I tried this meta data here
<link
href="https://fonts.googleapis.com/css2?family=Rubik:wght#400;500;700&family=Tajawal:wght#200;300;500;700&display=swap"
rel="stylesheet"
/>
and still get the same result
You need to use the viewport meta tag and set the initial-scale.
<meta name="viewport" content="width=device-width, initial-scale=1" />
initial-scale
Controls the zoom level when the page is first loaded.
Minimum: 0.1. Maximum: 10. Default: 1. Negative values: ignored.
MSDN Article
The problem in this case was because my CSS property. I have worked with the font size as 62.5% to make 1rem=10px and then when I tried to test the web on the phone or small media's I got an auto zoomed page when first login to it, I have changed the meta tag from
to this one and the problem is solved.
So i got a client that wants the site to look on mobile exactly like on desktop (small text and all). the issue im encountering is that the site zooms on mobile so i figured im doing something wrong.
i used this code:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=0.5, minimum-scale=0.1, maximum-scale=1.0">
with this it loads it zoomed, if i change the initial scale to 0.1 i get white bars around the content and the text gets enlarged.
any idea how to achieve it properly? JS or something?
thank you.
You have to use media query to make your site mobile-responsive and you only need to add this code in your <meta> tags.
<meta name="viewport" content="with=device-width, initial-scale=1.0">
You can use media query like this. In here 500px is based on mobile device width, It means all css properties in media query will run if your device width is below 500px. Otherwise it will load default css properties which you wrote earlier in the document.
#media all and (max-width: 500px) {
/*Your
Changing
CSS
Properties*/
}
You can learn more about media query in this article.
I have website 1000x820
It's not a real website, don't ask me about responsive web design.
viewport:
<meta name="viewport" content="target-densitydpi=device-dpi, width=1000px, user-scalable=no">
Then on Iphone SE with iOS 10.
Add to Home Screen.
Launch the application with 1000px width and it view very good with both orientation and we can change it. Of course we can't zoom.
Focus an input and type text. While nothing zoom. Unfocus the input or change an orientation and our scale will be broken. We can't change it.
$('meta[name=viewport]').remove();
$('head').append('<meta name="viewport" content="target-densitydpi=device-dpi, width=1000px, user-scalable=no">' );
It didn't help me.
Perversion with fonts too.
I've one bad idea. Trace changes of viewport and refresh the page.
You're meta tag includes user-scalable=no and an explicit width.
Remove the user-scalable and update width to width=device-width. You can use initial-scale=1.0 to set a zoom level for devices.
MDN - Using the viewport meta tag to control layout on mobile browsers
I've built a web page which displays a grid. On the regular screen (laptop / desktop), the browser is at 100% zoom level and the UI looks fine.
However, when I connect my laptop to a projector, the browser automatically sets the zoom % to 125% and everything is bigger and scroll bars appear everywhere.
I don't understand what this behavior is based off or where it is coming from. Is it due to the resolution change?
Is there a way for me to make sure my UI does not get zoomed when I connect to a large screen?
Thanks
You should be able to avoid scaling on certain screens by setting the viewport meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
When I double-tap near the edge of a page that exceeds the height or width of the browser window in Safari under iOS4, it zooms in or out and/or scrolls up, down, right, or left, depending on the size of the page and the current viewport position. How can I prevent this behavior, please?
I'm working on a site where this is (very) bad; we're preserving several layers of menu state and scrolling horizontally to navigate between layers. Double-tapping hoses the layout, and there's no intuitive way to get it back.
Double-tap does not seem to fire a scroll or touch event as far as I can tell. Other things I've tried:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
... with variations:
user-scalable=no
user-scalable=0
width=device-width
width=320
It looks like making absolutely certain that none of my important elements--I have a static header, scrolling body, and static footer, and the header and body can both scroll sideways--actually exceed the viewport width and have overflow:hidden seems to have done the trick.
Very sad there's nothing official on this, because it's annoying, and breaks most of the other examples I've found online
You have a small typo in you meta tag, between each setting you should use comma. ex.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
I find that the <meta name="viewport" ...> tag generally works on iOS to prevent scaling with double-tap but on the iPad3 on iOS 5.1 there are occasional rare circumstances, which I have difficulty reproducing, where the double-tap zoom gets activated and subsequently screws up the page layout. The behavior is quite buggy. Perhaps using Javascript to manage tap events can help to prevent this from happening while we wait for Apple to fix this. It's difficult to test without having a way to reproduce the bug though.
Disclaimer: I have not tested this method.