I want to fit my page on the screen, whatever resolution is there and not allowing scaling.
I have seen in alot of documents/resource that this is the best way of using viewport to adjust the whole page on the screen. (even jquerymobile generate this viewport)
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
but It only show some portion of the page.
But this code works as excpected. The whole page is fit on the screen
<meta name="viewport" content="user-scalable=0;" />
Whats the difference?
This meta tag requires that your document width is device width. jQuery Mobile uses it because jQuery Mobile make sure that it will adjust document width according to device width. If you want to put a 980px wide page in a 320px wide screen, then you have to set 980px in the meta tag:
<meta name="viewport" content="width=980, user-scalable=no">
If you don't know your document width, you have to get it first and then set the meta tag property.
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.
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" />
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.
Is there any way to change the default zoom of a browser with viewport or javascript,when users acces your website?(PC,Laptops)
Ohh ive seen you mean PC, Laptops
That is only possible via css (or javascript css manipulation) you should set a zoom attribute to the body element
even though i don't recommend to do this its the only way I know
OLD POST:
You should give this site a try:
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
especialy this:
<meta name="viewport" content="width=device-width, initial-scale=1">
The initial scale is like a zoom for your page
Try
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
where initial-scale is what you want, you also might want to change user-scaleble to yes depending on system requirements.