I have a simple script:
<style>
#media only screen and (max-width: 600px) {
body { background-color: red; }
}
</style>
<body>test</body>
This works fine on my PC. However, on my phones (both 2 of them), regardless of the browser, it doesn't work. Only when I change the max-width to 980px that it changes red. Obviously my phones aren't that large. I try to add this ruler, and while its length is fixed on PC (as a good ruler should be), on my phones it's shrunk.
Do you know why is that?
Make sure you have set a viewport meta tag inside your head tag.
Mobile devices will usually use a virtual viewport to display websites. The meta tag tells the browser how it should display the site on mobile.
<meta name="viewport" content="width=device-width, initial-scale=1">
The width=device-width tells the browser that it should set the virtual viewport to be the width of the device, and initial-scale=1 sets the default zoom level.
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 our website is in its last stages before we make it live, however we have just noticed when we were checking mobile responsive everything was working fine, until we rotated the mobile to landscape view and it displayed the same styles as on a desktop and the responsive media wearies weren't working!
our responsive code is as follows:
#media screen and (max-width:600px){
.stats{
display:none;
}
}
can anyone help please?
A landscape device ratio is bigger than 600px. If you use chrome, dev tools, when re sizing the viewport it shows you exactly the amount of pixels which is visible.
Off the top off my head, i would say you need to change your media query to;
#media screen and (max-width:787px){
.stats{
display:none;
}
}
add
<meta name="viewport" content="width=device-width, initial-scale=1">
between head tags so you can get correct width from mobile devices (https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag) and change your media query as
#media screen and (max-width:767px){
.stats{
display:none;
}
}
for mobile devices (phones)
I make a portfolio page, but I just make for large device. Now I want responsive so can I use #media query?
Here is my page, it looks good in large device but medium device and mobile look bad:
http://khanh19934.github.io/demofullport/
example
#media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Here are some ideas to get you started.
Begin by adding a viewport meta tag in the head of your page, this will instruct mobile devices not to scale the content to fit the viewport (window width)
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
<head/>
Then you need to examine all elements on the page and adjust them where necessary so they work for all screen widths.
One approach would be to start with a wide window, then decrease the width until something doesn't look good. At that point inspect and adjust the css for the element in question.
You'll probably create a media query which targets the element at that viewport.
For example, you might decide that when the viewport is 1000px wide, the title div in the centre of your page is too small, it's currently styled at 25%, so you create a media query like
#media screen and (max-width: 1000px){
#title{
width:50%;
}
}
If you are new to responsive design spend some time getting up to speed with Chrome Developer Tools and what you can do with it. It's indispensable for work like this.
Good luck!
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