Using media query I created different views for different pixel count screens. But now on small screens with high pixel count (like iPhone5, S3, S4) desktop view is shown.
How can I show small screen view i. e. 520px view on these HD screen mobiles?
Some meta tag or whatever html that can help is welcomed.
Try adding these two lines on top of your HTML File.
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<header>
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
</header>
css
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-width : 320px)
and (max-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-width : 768px)
and (max-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Related
Im building a mobile website and im not making it responsive. I am using media queries for each device. You may or may not think that is a good idea but I want to do it this way as the site is only 3 pages and very small and only accessible via mobiles.
My problem is that I need a good emulator so that I can adjust for the phones I do not own. I only have an iPhone to test and Chrome is not matching up. Is there a better emulator out there, or am I doing something wrong?
Chrome version
Actual screenshot from iPhone
Thanks.
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0"/>
I have solved the problem. I was redirecting from index.html using the following code:
if (screen.width < 765) {
window.location = "http://www.myaddress.com/index2.html";
}
Once I removed this code and made my index.html my mobile web site index file, the chrome emulator was the same as the actual screen.
I do not know why this happened. Somehow redirecting with the javascript has made the redirected address have a different viewport.
Where is your css sheet? Add all of this to the bottom
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
/* iPhone 6 landscape */
#media only screen and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2)
{ }
/* iPhone 6 portrait */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2)
{ }
/* iPhone 6 Plus landscape */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 3)
{ }
/* iPhone 6 Plus portrait */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 3)
{ }
/* iPhone 6 and 6 Plus */
#media only screen
and (max-device-width: 640px),
only screen and (max-device-width: 667px),
only screen and (max-width: 480px)
{ }
/* Apple Watch */
#media
(max-device-width: 42mm)
and (min-device-width: 38mm)
{ }
I am currently in an intro HTML/CSS class and I am having trouble optimizing my webpage for various mobile resolutions. I have been using a website resolution simulator to test and my layout always looks wonky on certain settings.
Is there way to auto detect resolutions using HTML and CSS?
Edit: I have added a meta viewport already
Yes there is.
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Source:http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Is it feasible to developers specify when the contents of the web page stack by responsive design? So for example if you are in 1200 x 1800 resolution, you are in the following display:
[A] [B]
However, if you are in 1000 x 1800 resolution, your display automatically in the following stack format by the virtue of Twitter Bootstrap's responsive functionality (I use Bootstrap 3):
[A]
[B]
However, is it feasible for developers specify when the responsiveness occurs - for example, when the resolution is less than 1100 x 1800, the above stack occurs - and if it's feasible, how can I specify it?
I use Bootstrap, HTML5, CSS3 as well as node.js, but I think node is irrelevant in this case.
I use Google Chrome, and don't care about how the other browsers react to the change.
Thanks.
One approach may be to have a look at media queries (2), e.g. quoting from Mozilla
<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- CSS media query within a style sheet -->
<style>
#media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
I hope help you
my media query works as per expected on my desktop however not in the mobile phone or the tablet.Please check out the live code here http://jsfiddle.net/E8cgT/
if the screen is bigger than 1024px it should be green my tablet screen is but the background stays yellow.
This also happens on my cell phone no matter what is stays yellow.
or read below
my html:
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" media="all" type="text/css" href="style.css"/>
</head>
<body>
<div id="master">
<header>
</header>
<nav>
Welcome to the home page from the sites directory
<ul>
<li>Meet Your Sensei</li>
<li>Tour Our Dojo</li>
<li>Our Martial Art Program</li>
<li>Our Training Schedule</li>
<li>Current Events</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</nav>
</div><!-- end of the master div tag -->
</body>
</html>
my css:
/* this will not work as we have below media to over ride */
body{ background-color: red;}
/* Low resolution for cell phones for 480 and below
*/
#media only screen and (max-width:480px)
{body{background-color: blue;}}
/* High resolution for screen between 1024 and above
*/
#media only screen and (min-width:1024px)
{body{background-color: green;}}
/* Medium resolution for screen between 481 and above
*/
#media only screen and (min-width:481px)
{body{background-color: yellow;}}
[SOLUTION]
1) The view port was something which I did not know about.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2) I changed the priority of the screen after all is casing style sheets.
body {
background-color: red;
}
#media screen and (max-width:480px)
{body{background-color: blue;}}
/* Medium resolution for screen between 481 and above
*/
#media screen and (min-width:481px)
{body{background-color: yellow;}}
/* High resolution for screen between 1024 and above
*/
#media screen and (min-width:1024px)
{body{background-color: green;}}
Thank you all.
See if this helps you:
Live view
Edit view
I've made a few changes to your code;
Firstly you want to add
<meta name="viewport" content="width=device-width, initial-scale=1.0">
to the head of your page. This will stop smartphones and other devices from scaling the page.
In your media queries you use #media screen only and .... There's nothing wrong with using only in the selector, though it does have a specific use, to hide the style from older browsers. If this isn't intentional then you can omit it.
( The keyword ‘only’ can also be used to hide style sheets from older user agents.: source
I think you'll have an easier time targeting different size viewports if you use
#media screen and (min-width:Xpx) and (max-width:Ypx){
....
}
as #Tdelang correctly pointed out.
Good luck!
Because of the cascade. You must set an upper limit for the middle breakpoint:
media only screen and (min-width:481px && max-width:1023px)
{
...
Have you tried using
#media all
or
#media handheld, screen and (max-width:480px) { /* your css */ }
try this
http://jsfiddle.net/E8cgT/3/
CSS
/* this will not work as we have below media to over ride */
body {
background-color: red;
}
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
body
{
background-color: blue;
}
}
/* Low resolution for cell phones for 480 and below
*/
#media only screen and (max-width:480px) {
body {
background-color: blue;
}
}
/* High resolution for screen between 1024 and above
*/
#media only screen and (max-width:1024px) {
body {
background-color: green;
}
}
/* Medium resolution for screen between 481 and above
*/
#media only screen and (max-width:481px) {
body {
background-color: yellow;
}
}
OR PLEASE USED THIS CSS FOR RESPONSIVE MOBILE,TABLET,DESKTOP
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
#media screen and (max-width:480px)
{body{background-color: blue;}}
/* High resolution for screen between 1024 and above
*/
#media screen and (min-width:1024px)
{body{background-color: green;}}
/* Medium resolution for screen between 481 and above
*/
#media screen and (min-width:481px)
{body{background-color: yellow;}}
use it this will work for me in mobile, ipad and also on window screen.
Here is this website:
http://www.morpheuscommerce.com/
Now this is what happens when i view the site on an ipad:
http://i.imgur.com/I4cQ9Yb.jpg
A similar thing happens on iphone. On desktop it looks fine at first but when you resize the browser and move the scrollbar to the right, the background is broken is well!
Ive tried so many things to try fix this but Im not sure whats causing the problem in the first place.
Your website it's no responsive layout.
You can change this with css #media
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Search more about responsive layout.