I'm trying to optimize my webpage to 720*1200 mobile devices:
My page
It works perfectly on 320*480 and 480*800 devices, but not on 720*1200.
The page loads zoomed in,
just like the layout viewport would be 720*1030 but the visual viewport would be 360*515.
I've set the viewport tag, but it hasn't any effect.
<meta name="viewport" content="width=device-width,user-scalable=false" />
<title>teeg bejelentkezes</title>
<link rel="stylesheet" type="text/css" media="only screen and (min-device-width:720px)" href="css/style-720.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:719px) and (max-width:719px) and (min-device-width:480px) and (min-width:480px)" href="css/style.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:479px) and (max-width:479px)" href="css/style-320.css" />
Thanks for any help!
Recommendation:
Use min-width and max-width in the media queries.
Avoid using min-device-width and max-device-width.
Viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Add minimum-scale, maximum-scale, or user-scalable if needed.
Media queries:
<link rel="stylesheet" type="text/css"
media="only screen and (min-width:720px)"
href="css/style-720.css" />
<link rel="stylesheet" type="text/css"
media="only screen and (min-width:480px) and (max-width:719px)"
href="css/style.css" />
<link rel="stylesheet" type="text/css"
media="only screen and (max-width:479px)"
href="css/style-320.css" />
Explanation:
min-width and max-width are easier to work with than min-device-width and max-device-width. Using all 4 of them may result in media queries that will not be applied in some cases, since the two sets of values do not always match.
On iOS devices, min-device-width and max-device-width act on the width in landscape mode, regardless of orientation, while min-width and max-width act on the width of the current orientation.
Also, on Android devices, min-device-width and max-device-width correspond to physical pixels, while min-width and max-width correspond to dips (device-independent pixels), which makes it easier to work with devices with a variety of pixel densities.
The Boston Globe, the best example of adaptive-content responsive design, works almost entirely on min-width and max-width.
Try these:
width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0
Thanks for answers, i've tried Matt Coughlin's suggestion, but the AVD (720*1280) included the 480px css instead of 720. In the end I switched my approach and i changed my design to responsive. RWD
and Examples
Related
I want to use different stylesheets for different screen widths (before and after 700px).
<link rel="stylesheet" href='media700.css' media="screen and (max-device-width:700px)">
<link rel="stylesheet" href='media1366.css' media="screen and (min-device-width:701px)">
Doesn't work. media1366 is always overwriting media700.
The width of your device is larger than 700px, therefore
max-device-width: 700px
is not true and
min-device-width: 701px
is true, therefore the behavior you experience is actually expected.
The two rules cannot override each-other, as they are mutually exclusive.
You have to write media queries in sequence Higher Size to Lower Size, so in your case the files should be includes in sequence from Higher 701px to Lower 700px.
<link rel="stylesheet" href='media1366.css' media="screen and (min-device-width:701px)">
<link rel="stylesheet" href='media700.css' media="screen and (max-device-width:700px)">
you just need to change the order and delete the device word
<link rel="stylesheet" href='media1366.css' media="screen and (min-width:701px)">
<link rel="stylesheet" href='media700.css' media="screen and (max-width:700px)">
See more info on this Stack Overflow Answer
I have the following and I want it to switch what stylesheet is used, but the last stylesheet defined is being used, the media query is not working.
Do I need to do something in addition to what I am doing?
<!-- iPhone -->
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 320px)"
href="/frontend/stylesheets/iPhone.css"/>
<!-- samsung -->
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)"
href="/frontend/stylesheets/samsung.css"/>
<!-- iPad -->
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 768px)"
href="/frontend/stylesheets/iPad.css"/>
Because of CSS Specificity and because your iPad media query is actually always going to be true (since the screen width on mobiles is always less than 768px). So it will override the rules/selectors you have in your other stylesheets.
You can try reordering you stylesheets the other way around (ie iPad lists first), but i would recommend you specify more explicit media queries to achieve what you want. Have a look at adding a min-device-width clause to your querys.
You can see an advanced example here:
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
I'm entirely new to the world of CSS, let alone media queries, so any help would be super appreciated!
I'm working on an assignment for school where we have to test our media queries and have a different style sheet for a variety of device sizes. I think I'm basically having the same problem as discussed on this post: Media Queries - Mobile vs Desktop Browser, but it's not clear to me how that commenter resolved their problem.
This is probably the relevant coding where the error lies, I think?:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--container div tag-->
<!-- Low res -->
<link href="colors2.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 128px)" />
<!-- Mid res -->
<link href="colors3.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 176px)" />
<!-- High res -->
<link href="colors4.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 240px)" />
<!-- Touch -->
<link href="colors5.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 320px)" />
The queries work on desktop browsers, but when I launch the page on Opera Mobile Emulator with (what I think are) the correct screen resolutions, they all take the default of the min-width 320px style. I've tried to add ", screen and (min-device-width:" to the tags as well, but for some reason, having both cancels the whole thing out and I end up with my basic HTML on a white screen. I've also tried doing the #media thing where I then post the styles below, but it seems like Dreamweaver 6 is rejecting them (???) because they get highlighted in maroon and, again, I get the white background.
So...I'd be very, very thankful for any help! And I should also mention that the very small min-widths are part of the assignment. I think they're all too small, personally! Thanks so much:)
Opera Mobile Emulator works very different from the real app.
I'd suggest you to test the site live in a mobile device.
I have my mobile stylesheet as such:
<link rel='stylesheet' media='only screen and (max-device-width: 480px)' href='css/mobile.css' type='text/css' />
And my main stylesheet as such:
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
When I go on the page from a mobile device, it has a mix of mobile and main stylesheet rules. How can I make the mobile stylesheet be exclusive to mobile devices, and the main stylesheet exclusive to the screen?
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link rel='stylesheet' media='screen and (max-device-width: 480px)' href='css/mobile.css' type='text/css' />
Also make sure you have this in your head:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Well, your problem is that both devices use screens. Your css/style.css file targets any devices that uses a screen, and any styling should be as applicable to a narrow device as it is to a wide device. You may need to refactor your style rules.
Also, make sure that your mobile stylesheet is listed after the generic screen one, or else the generic screen stylesheet will override the mobile one.
Below are my stylesheets for my mobile site:
<META name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<META name="HandheldFriendly" content="true" />
<link type="text/css" rel="stylesheet" media="screen and (min-device-width: 481px)" href="css/smartmobile.css" />
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="css/smartmobile.css" />
<link type="text/css" rel="stylesheet" media="handheld" href="css/mobile.css" />
I loaded the page in an iPhone and it looks like it's supposed to. However when I load the page in a Blackberry it doesn't use the "handhled" one but rather tries to use the other stylesheets. Anyone have any thoughts to why this happening?
Yes most phones even more so the older ones will simply ignore the "media" type and I would suggest using some from of server side detection if you need the css to be different on different phone types.
Consider media queries (as you've done for iPhone) instead of media types. http://www.alistapart.com/articles/responsive-web-design/ Many devices don't support the handheld media type.