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.
Related
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.
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.
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
I created a website without using mobile theme.
If i open my website in my smart phone browser, it resizing my theme.
I mean, It automatically reduce the size to my mobile browser.
For example...I already mention my text box size in my CSS code. The mobile screen pixel size is differ from desktop machine screen pixel size.
My Question is, how it reduce the screen resolution to mobile view?
please clear my doubt.
Thanks in advance.
Do you mean to resize your sites content for the handheld device? If you have a fluid layout (with % instead of pixels for widths) use:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Further reading: http://developer.android.com/guide/webapps/targeting.html
Either there might be some media queries defined within your stylesheet like
#media handheld, only screen and (max-width: 1024px)
{
//Style goes here
}
Which is a style defined for screens having maximum width of 1024px.
Another possibility is, styles may be defined fully in percentage. So that the styles are changed according to the window size.
Again there might be some scripts used in your code to resize. All depends on the code that you are using. There are variety of methods which fits the view according to the screen size.
if you want scale it in browser tell it in css.And use all width in % values
eg:
#media handheld, only screen and (max-width: 767px) {
//mobile version css
}