Assign a viewport width based on device resolution - html

I know that I can define the viewport size with:
<meta name="viewport" content="width=330, user-scalable=no, initial-scale=1, maximum-scale=1">
And I know that I can have the viewport adjusted to the device's with:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
Is there any way (without JavaScript) to detect the device width and assign a viewport:
For example,
If the device-width is in the range (0-450px) to set:
<meta name="viewport" content="width=400, user-scalable=no, initial-scale=1, maximum-scale=1">
And if the device-width is in the range (451-900px) to set:
<meta name="viewport" content="width=700, user-scalable=no, initial-scale=1, maximum-scale=1">
I haven't been able to find any references online that detail this. I really appreciate any help or references.

I found that what I was trying to do with JavaScript is achieved, yes, with a W3C standardized method.
Combined with media queries to change the styling of certain elements depending on resolution, simply define:
<meta name="viewport" content="width=width, user-scalable=no">
And the viewport will automatically assume the size of your page.

Related

can't able zoom in out in mobile devices

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
I am using the above meta tag to detect the device but I can't use + n - normally we use in the websites, can anyone explain why it is not working? My website url is below,
https://ezybeeaustralia.com.au/index.php?page=item&id=33
It is because of user-scalable=no,maximum-scale=1.0

Disable zooming for touch devices in bootstrap framework

I am using twitter bootstrap framework. I want to disable zooming in touch devices. I have already used
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
this. Without bootstrap framework and i can prevent zooming in touch devices, but with framework i'm not. So is there any workarounds to do that.
Thanks in advance.
Write Following code that will disable the mobile zoom disable andy also disable for focus on the any input type
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
If you look at Bootstrap documentation, they have said that in order to disable zooming, you must include the following meta tag between opened and closed head tags:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
As other guys mentioned and also you can find in Bootstrap documentation at http://getbootstrap.com/css/#overview-mobile here is the solution
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Guys thanks for the answers. Actually it was my silly mistake. I had a multiple meta's in the page and it was causing the problem. Below code should work for all.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

iOS6 displaying site too large when using initial-scale=1.0 and maximum-scale-1.0

When I remove initial and maximum-scale out from the meta tag:
<meta name="viewport" content="width=device-width, user-scalable=no" />
tag, iOS 6 Safari is diplaying the site too large. I have to take the initial and maximum out for it too fit correctly. Is it acceptable to leave the viewport tag like this? I haven't tested on other mobile devices.
I use the following for ensure proper sizing on all mobile devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
In some cases, I will adjust the initial-scale down a minor amount to ensure the proper scale:
<meta name="viewport" content="width=device-width, initial-scale=.96"> // Scale as needed

meta name="viewport" doesn't work as expected

I have that meta tag in my website www.ssd-vergleichen.de
<meta name="viewport" content="width=device-width; initial-scale=1.0;"/>
To prevent the device from initial zooming into the website.
When watching the website on my chrome mobile browser on Samsung Galaxy S2, the website is beeing zoomed in about 400%.
What did I do wrong? Can anyone help?
Thanks in advance
Edit: With using
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
it works in Android's standard webbrowser, but still not in Chrome. I wonder if it works in IOS?
Edit2: No, it also doesn't work with iOS http://iphonetester.com/
Try this :
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=320, height=device-height, target-densitydpi=medium-dpi" />
Have you tried
<meta name="viewport" width="device-width">
As I understand it width="device-width" constrains the width of the layout to the device width. Surely setting intial-scale=1 is then telling the browser to zoom 100% (i.e. not scaled)?
Update
<meta name="viewport" content="width=device-width, initial-scale=1;"/>
Is intended to be used to scale responsive sites correctly. Considering your site is fixed to a width of 1100px, setting initial-scale=1 will not result in the whole page being visible.
From the W3C Use Meta Viewport Element To Identify Desired Screen Size
Try:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
with no ;
I had the same problem today and I was able to fix it by toying with the target-densitydpi attribute and setting it to high while setting the width to device-width
Like so:
<meta name="viewport" content="initial-scale=0.8, zoom=10%, width=device-width, target-densitydpi=high-dpi">
This solved my problem.
Try this:
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
In CSS put this:
html, body {
max-width: 100%;
overflow-x: hidden;
}
You should write
<meta id="viewport" name="viewport" content="[your_content_params]" />
I tried this and it worked.

Zoom in mobile webpage?

Okay this makes a mobile webpage not be able to zoom:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes">
Now how do I make it be able to zoom?
Change the value of maximun-scale.