I have tried both min-width , max-width and min-device-width , max-device-width ,but none of them worked on smartphone(tested on iPhone) as expected.Smartphone view remain same when either one is used.I just get the same view as laptop(My laptop 1224px) on my phone but with smaller size.Images would clarify my point.
This is what I get on laptop(browser maximized),when min-width(1224px) is used
View 1
When I use min-width(320px) and max-width(480px) and shrink the browser on laptop,I get this
View 2
which is my expected result on smartphone.But I don't get this view on smartphone,even after using min-device-width(320px) and max-device-width(480px).Both width and device-width gives me view 1 with smaller view on iPhone(smaller images and tiny font)
How to get rid of this problem.
Your help would be greatly appreciated.
Because you said you do not have a viewport meta tag in your head, you will not have consistent scaling in mobile devices. In the <head> of your html, add the following:
<meta name="viewport" content="width=device-width, initial-scale=1">
Source: Using the viewport meta tag to control layout on mobile browsers
Related
I want to know is there any way to have responsive web design except using this meta tag :
<meta name="viewport" content="width=device-width,initial-scale=1">
Below meta tag will just reset initial scale to 1 and width to device width
<meta name="viewport" content="width=device-width,initial-scale=1">
you can however use media query for responsive web design
like for ex
#media only screen and (min-width: 769px) and (max-width: 1281px) {
h1{
color: red;
}
}
Take a look at this, bootstrap has it's own media querys also responsive.
No. HTML needs this meta tag for creating the page a responsive page. There is no other method in css.
But, you can create the responsive page by JS. You have to write different css code for different resolution and on page load you can calculate the width of the page and load specific css file required for that particular resolution.
Although it is not a ideal way for responsive page.
Thanks!
The viewport meta is the element which turns a regular site to responsive web design. Without the viewport meta tag, the page is displayed as a typical desktop screen even in the mobile device. So using the tag is a must if you want the site to be responsive in all the devices.
<meta name="viewport" content="width=device-width"> tag (originally Apple-proprietary) actually makes the layout viewport fit the device exactly.
Now what is the layout viewport? It’s the area (in CSS pixels) that the browser uses to calculate the dimensions of elements with percentual width, such as div.sidebar {width: 20%}. It’s usually quite a bit larger than the device screen: 980px on the iPhone, 850px on Opera, 800 on Android, etc.
If you add <meta name="viewport" width="device-width">, the width of this layout viewport is constrained to the device width in device pixels; 320 of them in the iPhone’s case.
That matters if your pages are narrow enough to fit in the screen. Take this page without any CSS width statement and without the <meta> tag. It stretches over the full available width of the layout viewport.
This is probably not what you want. You want to fit the text nicely on the screen. That’s the task of <meta name="viewport" width="device-width">. When you add it, the layout viewport is contracted (to 320px in the case of the iPhone), and the text fits.
Source: A pixel is not a pixel is not a pixel
The following solution provides responsiveness without using the viewport meta tag, but is not recommended.
Use #media queries with min-device-width or max-device-width instead of min-width or max-width
Example using mobile-first approach:
//CSS Rules to apply when screen size < 960 px ( Your mobile rules go here )
#media screen and (min-device-width: 960px) {
//CSS Rules to apply when screen size > 960px
}
Unless you have a strong reasoning always use <meta name="viewport" content="width=device-width,initial-scale=1"> tag.
I am using css media queries to make a web page (currently not published) responsive. However, in Chrome Inspector mobile device mode, the site is not response. However, if I physically resize the browser window, it is responsive.
The media query begins like:
#media screen and (max-width: 767px) {}
Put this in the <head> of your page:
<meta name="viewport" content="width=device-width, initial-scale=1">
The viewport meta tag simplifies something that's pretty dicy, directing the browser to behave a certain way, instead of the browser trying to estimate what the right way to display a page is. Having CSS breakpoints, as you discovered, may not be enough--for some designs and browsers, it will be fine, but it's up to the browser.
width=device-width uses a custom value (device-width) that is what it sounds like--set the width of this viewport to how wide the device is. initial-scale means something like setting zoom to 100%. So, together: let the viewport be as wide as the device, and don't zoom in or out.
So I have my website here: http://easenhall.org.uk/index.html
If you were to reduce the width of the browser window it changes from desktop view to tablet view, then if you keep going it will change to mobile view.
It works on desktop browsers but if you were to look at the website through a mobile it will always display the web page in tablet mode. I cant figure out why.
If you inspect the desktop webpage and press the toggle device toolbar button and try to resize the page to a mobile view, you get a similar effect, it stays in tablet view.
I have checked the console and there are no errors displayed there, I cant find anything wrong with it. Any help would be appreciated.
Try to add this to your <header>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
You have to use this meta tag after the title tag, otherwise responsive does not work
<title>This is title</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
By way of background, when Apple introduced the iPhone some time back, they anticipated the problem that nobody at the time was writing pages designed for the small screen. This included the relatively new Media Queries, which was at the time still not widely supported.
They made the decision to scale the whole screen from a larger version to the small screen. It wasn’t easy to read, but at least you could see see where everything was, and you could always zoom into the interesting part.
The scaling was achieved by creating a viewport, an off-screen virtual screen, set to a width of 960px. The page would be rendered there, and scaled to the smaller physical screen.
It also meant that CSS media queries would get a reported width of 960px, and thus would not trigger alternative styles.
Apple also introduced a non-standard meta property called viewport, which gave the developer some control over the properties of the viewport.
The most common use of the viewport property is set the viewport size to the same as the physical screen. The viewort would then report a screen size which is more correct, and CSS Media Queries can do the rest. Effectively, the viewport is commonly used to undo the scaling effect.
Desktop browsers never had this issue to begin with, so the viewport is really just the browser window. That is why the desktop always tests as expected, because what you see is really what you get.
This is what vuejs (and probably other frameworks) is doing "under the hood":
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Setting exactly this tag in the header will lead to your desired result.
Hello friends to see if someone gives me a hand to tailor my web devices.
I tried to media queries and my phone (I have only one, Motorola Moto G) I managed to adapt, but I have not used the viewport tag. I just have been adapting the CSS through this media query:
Landscape:
#media screen and (max-width: 1000px) and (min-aspect-ratio: 13/9) {
}
Portrait:
#media screen and (max-width: 1000px) and (max-aspect-ratio: 13/9) {
}
On my phone the web is perfect, I managed to adapt both landscape and portrait. But what happens is that I have only this phone and do not know how the page will look in other devices, putting the viewport tag is deformed giant and completely:
<meta name="viewport" content="width=device-width, initial-scale=1">
The problem is that I'm pretty lost with this, because to prove my page this also deformed giant appears:
http://www.responsinator.com/
The question is, resolution is 1280x720 Moto G? Why to place the viewport tag goes so distorted? I do not understand, see if someone can explain. I tried to find information on the Internet but I can not understand it.
Thanks
What I think you're asking is that:
Is the Viewport Tag (the meta tag) absolutely essential because it is messing up your view of your website on your device.
To answer this, lets look at the viewport tag itself:
<meta name="viewport" content="width=device-width, initial-scale=1">
This tells the browser to set the initial scale to 100% of the viewport window, and the width of the body element to that of the device, so it is telling the browser to correlate the width of the webpage body element to the same width as that of the device viewing it.
In short, no the viewport tag is not absolutely essential, but it is an extremely good idea, although you can change the settings on the content part of the tag such as
<meta name="viewport" content="width=500, initial-scale=1">
or
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
You can do no wrong reading up on the Mozilla Developer Network page on the topic which will tell you the possible values you can set in the viewport tag. These are entirely seperate from the CSS display values and are used as a default for how the browser renders the page.
I can not give you more specific advice without you providing a more specific issue in your question
I'm creating responsive web app for desktop and mobile devices. My problem is I don't know when I need to use *-device-width. Pls explain usecases for *-device-width. Why should I use it instead of *-width?
You use it with a meta tag, which you will add to your head tag
<meta name="viewport" content="width=device-width" />
From Difference between width and device-width in CSS media queries:
device-width is the...
width of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).
Source.
The width...
describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page
box on a printer)
Source.