I am less confused to make a website only for mobile and tablet not a desktop. I need to know only one thing.
Should I use <meta name="viewport" content="width=device-width, initial-scale=1"> and define #media only screen for specific device?
Yes, however your website still will be accesible from other devices.I can explain it for you:
Using tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
It will adjust webpage width to match device width and set initial scale to 1 (no zooming). So for example, if you open this page using iPad, web browse will display page in 1024x768 (landscape) or 768x1024 (portrait).
initial-scale=1
This will force to display webpage with zoom set to 1.
Using media queries CSS3 you can set different CSS styles for different devices:
Styles for Tablets
#media screen and (min-width: 768px) and (max-width: 1024px) {
/* Styles for tablets */
}
Styles for Desktop
#media screen and (min-width: 1025px) and (max-width: 1280px) {
/* Styles for Desktops */
}
Related
So I have made a HTML email, with a mediaquery for screens under 399px width. Everything works fine until you open the mail on portrait mode(width under 399px), and then rotate your screen to landscape mode. When you rotate the screen it seems like the width doesn't update to the new width (let's say 450px, so the mediaquery isn't active).
When I have my phone in landscape mode, and then open the HTML mail everything is fine.
I've already tried different mediaqueries with max-width, device-widthand orientation: landscape. In the head i've the meta tag <meta name="viewport" content="width=device-width, initial-scale=1">
Here is my media query:
#media screen and (max-device-width: 399px) and (max-width: 399px) {
#body_table {
padding: 0 10px;
}
.container {
width: 100%;
}
}
I have currently a website that is responsive but since its not very good in mobiles and tablets I want to make it like desktop (.col-md-x) on all smaller devices. I use bootstrap 3.
so if the resolution is more than 1200px it should show large version (.col-lg-x) and if not, it should always show the desktop version (.col-md-x).
to do this I deleted the
<meta name="viewport" content="width=device-width, initial-scale=1">
tag from the page head tag and replaced it with
<meta name="viewport" content="width=1024">
that do the trick but the page was very very zoomed out. so I changed the bootstrap break points in bootstrap customization page so that col-xs-x and col-sm-x and col-md-x breaks on 1px page width, and col-lg-x on 1200px.
its better now but the sidebars and some other elements will hide on small devices and full page is not shown there. what I want is a complete page like desktop with horizontal and vertical scrollbars and no breaking and no hiding and no collapsing navbar and other things. how can I achieve this?
use Media Queries for Standard Devices
You should include the following <meta> viewport element in all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
you can learn
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
https://www.w3schools.com/css/css3_mediaqueries_ex.asp
example
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
#media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
If you define only the behaviour for col-xs-x, it should automatically show the same behaviour for the larger formats, so the solution here is to just use col-xs-x on your elements.
We don't have to define anything for extra small devices since the default is one column. We have to define a grid size for small devices, but not for medium devices. This is because the grid cascades up. So if you define a size at sm, then it will be that grid size for sm, md, and lg.
More information can be found here
I have placed
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
in my header. I want a specific css for screen width 768px but my div with class price-tag is not taking style from
#media only screen (min-width:768px) {.price-tag{left:180px;}}
If I write
#media (min-width:768px) {.price-tag{left:180px;}}
it takes the style and applies it to all screen width. Am i doing this in wrong way ?
You need to use and.
This isn't valid:
#media only screen (min-width:768px)
It should be:
#media only screen and (min-width:768px)
Applying to 768px specifically:
If I've understood your comment correctly you'd like to apply styling to screens specifically at 768px wide. No lower; no higher. While I can't quite picture why such code would be useful or practical I can show you how to do it.
Combine min-width and max-width using the same value:
#media only screen and (min-width: 768px) and (max-width: 768px) {
I have a website that has a fixed width of 1024px and is centered on desktop. On mobile devices, the width should match the size of the phone or tablet.
When using device-width, like this
<meta name="viewport" content="width=device-width, initial-scale=1" />
I get following result:
I get the same result using width=1024.
... Which is really confusing, since the user is unable to gather an overview. I don't know why device-width sets the website's viewport to this particular size. I would expect otherwise.
What I'm expecting and what I really want is something this:
Question: How do I tell the device to fit the website on the screen exactly?
In order to make a website adaptive and responsive I recommand using
#media screen and (max-width: the max width you want){ }
You can also add this in your . This will make the initial scale 1 and allow for some zooming into 3.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3" />
You also need to use % instead of pixels on wrap elements. This way it adjust according to your screen.
Here is an example:
For devices with 0-500px width, run the second CSS code.
For devices with 500-1600px width, run the first CSS code.
You can also specify for retina using this:
#media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx){ }
This is the other example:
/** From 500 - 1600px width **/
#media screen and (max-width: 1600px){
body {
background-color: #fff;
}
}
/** From 0 - 500px width **/
#media screen and (max-width: 500px){
body {
background-color: #000;
}
}
I asked a similar question earlier. You can check it out here.
What you got when remove scale factor from meta tag? And another question: do you want users to zoom (scale) page or not? I shall try better:
<meta name="viewport" content="width=device-width" />
and also:
<meta name="viewport" content="width=device-width, maximum-scale=1.0" />
For fitting height and width you can play with those meta:
<meta name="viewport" content="height=device-height, width=device-width, minimum-scale=1.0, user-scalable=yes|no" />
I am trying to make a responsive layout that has a phone view and a normal view only (ie. Tablets should load the page normally).
Everything is working correctly as far as the CSS goes however the viewport is screwing up the zoom on tablets when they're in portrait mode. (They're zoomed in to their pixel width)
Is there a way to get tablets to zoom out to the full page while still having the phones load scaled to their size?
Here's what I have... Changing the initial scale to .75 almost works but then the iPhone loads the normal site when in landscape, which I don't want.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 568px)" href="css/mobile-styles.css" />
Don't mess with the viewport, it'll only cause headaches and accessibility issues. Instead, create the CSS you want for phones(small screens) and then include the styles for the "full" site (large screens) in a min-width:500px(or some other breakpoint) media query.
Example CSS:
/*this will fire for any size screen*/
nav{
width:100%;
}
/*this changes the above styles for any screen over 500px*/
#media (min-width:500px){
nav{
width:50%;
float:left;
}
}