What is the best practice to build websites than can code with different screen sizes, for e.g. when resizing browser, or even when viewing a layout designed for desktop browser sizes such as 800X600 or more. I'm more a backend developer, now, I'm having to build a web application where I want to use jquery mobile. I just want that the layout changes for desktop as well. So far, I'm only aware of media types. Is there any better solution like a framework something. Thanks
you can either use client side media-queries in css to specify the behavior
#media-query(min-width:320px) {
.do_not_show_on_small { display:none}
}
MDN Media Query Info
or use the server backend and look at the user agent and send back different html...
http://www.whatsmyuseragent.com/
Then the an example of server logic like this:
if (ff8) then
send (browser_html.html)
else if (android os)
sned (mobile_html.html)
(of course this could be different templates for the same data using a template engine).
Need these on document's head:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
And these are the standard Media Queries
/* #MEDIA QUERIES
================================================== */
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {
body {min-width: 768px; } /* example */
}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {
body {min-width: 320px; } /* example */
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {
body {min-width: 420px; } /* example */
}
Best of luck! Check my site to see how it works: www.santz.net
Related
Alright, I'm at a complete loss. I've scoured the internet for a solution and it seems the only one thats working for people is this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Problem is, I already have that in my header on all pages. The media queries work just fine on my index.php page, but when I style my other pages everything works except mobile. That is, tablet and desktop styles just fine. I have the standard
/*----Mobile Styling----*/
#media only screen and (min-width: 768px) {
/*----Tablet Styling----*/
}
#media only screen and (min-width: 1000px) {
/*----Desktop Styling----*/
}
I'm at a complete loss, all of my brackets are closed, and my CSS looks alright. Anything else it could be?
It depends what browser you are using on your smartphone. If you use only, it will block all older browsers from smartphones. So in this case try using:
#media (min-width: 768px) {
/*----Tablet Styling----*/
}
#media (min-width: 1000px) {
/*----Desktop Styling----*/
}
Write your media Queries like this. and put your media queries at the end of your main css.
eg. if your fonts size for desktop is 14px and for mobile its 10px. than in your css when you writes 14px should come first and than in media queries for mobile write 10px. Mismatch in ordering could be the problem in your code.
#media(min-width:320px) and (max-width:479px) {
//Mobile Portrait
}
#media(min-width:480px) and (max-width:767px) {
//Mobile Landscape
}
#media(min-width:768px) and (max-width:991px) {
//Tablet Portrait
}
#media(min-width:992px) and (max-width:1199px) {
//Tablet Landscape
}
#media(min-width:1200px) and (max-width:1600px) {
//Desktop and bigger devices
}
I use Bootstrap 3 to create a tabbed search box like the one in the demo* I provide. I would like to make it responsive for the mobile version as well.
Specifically, when you resize the widow and the ul reaches the end of the form, the li items would stack 3 by 3 at some breakpoint and then as it gets narrower all of them will be stacked.
*Here is the demo: http://jsfiddle.net/hvS43/2/
**An example can be seen here: http://library.nd.edu/
I'm not seeing the "Head" section of your HTML, but I'd first check to make sure the following line is in it:
<meta name="viewport" content="width=device-width, initial-scale=1">
try using col-xs-6 in the li class.... Then use #media queries to style the tabs like you want. Let me know if this helps
You need to write media-query for the tabs like this eg:
#media (min-width:768px){
.nav-tabs>li>{width:50%;}
}
And write for the other view-ports, here is the bootstrap media-queries..
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
I'm trying to make my responsive CSS styles work only on tablets and smartphones. Basically I have a style for desktop, a style for mobile: portrait and a style for mobile: landscape. I don't want the mobile styles interfering with the desktop presentation at all. I have played around with countless media queries, but the result either the mobile styles are getting displayed on the desktop, or the mobile styles are displaying only on mobile devices but with only one set of rules (non-responsive). Is there a way I can keep the two completely separate?
My code I have right now goes like this:
/* regular desktop styles */
#media only screen
and (max-device-width: 600px)
{ ... }
/* mobile only styles when the device is 0-600px in maximum width */
#media only screen
and (max-device-width: 1000px)
{ ... }
/* mobile only styles when the device is up to 1000px in maximum width */
Why not use a media query range.
I'm currently working on a responsive layout for my employer and the ranges I'm using are as follows:
You have your main desktop styles in the body of the CSS file (1024px and above) and then for specific screen sizes I'm using:
#media all and (min-width:960px) and (max-width: 1024px) {
/* put your css styles in here */
}
#media all and (min-width:801px) and (max-width: 959px) {
/* put your css styles in here */
}
#media all and (min-width:769px) and (max-width: 800px) {
/* put your css styles in here */
}
#media all and (min-width:569px) and (max-width: 768px) {
/* put your css styles in here */
}
#media all and (min-width:481px) and (max-width: 568px) {
/* put your css styles in here */
}
#media all and (min-width:321px) and (max-width: 480px) {
/* put your css styles in here */
}
#media all and (min-width:0px) and (max-width: 320px) {
/* put your css styles in here */
}
This will cover pretty much all devices being used - I would concentrate on getting the styling correct for the sizes at the end of the range (i.e. 320, 480, 568, 768, 800, 1024) as for all the others they will just be responsive to the size available.
Also, don't use px anywhere - use em's or %.
What's you've got there should be fine to work, but there is no actual "Is Mobile/Tablet" media query so you're always going to be stuck.
There are media queries for common breakpoints , but with the ever changing range of devices they're not guaranteed to work moving forwards.
The idea is that your site maintains the same brand across all sizes, so you should want the styles to cascade across the breakpoints and only update the widths and positioning to best suit that viewport.
To further the answer above, using Modernizr with a no-touch test will allow you to target touch devices which are most likely tablets and smart phones, however with the new releases of touch based screens that is not as good an option as it once was.
I had to solve a similar problem--I wanted certain styles to only apply to mobile devices in landscape mode. Essentially the fonts and line spacing looked fine in every other context, so I just needed the one exception for mobile landscape. This media query worked perfectly:
#media all and (max-width: 600px) and (orientation:landscape)
{
/* styles here */
}
Yes, this can be done via javascript feature detection ( or browser detection , e.g. Modernizr ) . Then, use yepnope.js to load required resources ( JS and/or CSS )
I'm redesigning my site to have two layouts based on screen resolution. One has 1000px for any screen 1010px or greater, and the other has 675px for smaller screens. Right now I'm using the following viewport tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
This setup works fine in desktop browsers and on an iPad. However, both Android and iPhone browsers do not show the page correctly, they start at various levels of zooms. Instead I want the 675px display to be shown zoomed correctly so the whole width is shown on the screen. I tried to use:
<meta name="viewport" content="width=675px, user-scalable=yes">
And it improves the iPhone version somewhat but forces the iPad to show the smaller size even though it has a 1024px wide screen. Not quite sure how to fix this.
Btw the site is http://dendory.net
Have you tried removing the initial-scale=1.0 and just have your viewport as:
<meta name="viewport" content="width=device-width">
and then use media queries for your break points in the design.
Try working with mediaqueries. It lets you target a device to apply certain css properties on. You just simply paste it in your stylesheet. I use it to create responsive emails.
Here is an example of a simple mediaquery:
#media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
I hope this helps !
You should try using #media queries. Simply apply these to your stylesheet and you can have total variable styles depending on the device, size and what you want to achieve with different devices.
e.g.
/* MOBILE PORTRAIT */
#media only screen and (min-width: 320px) {
body {
}
}
/* MOBILE LANDSCAPE */
#media only screen and (min-width: 480px) {
body {
}
}
/* SMALL TABLET */
#media only screen and (min-width: 600px) {
body {
}
}
In these you can simply apply different styles depending on the scale of the device as shown below...
/* TABLET/NETBOOK */
#media only screen and (min-width: 768px) {
body {
}
/* COLUMN GRID */
.g1,.g2,.g3 {display:inline; float: left}
/* 2 COLUMN GRID */
.g1 {width:48.0%}
.g2 {width:48.0%}
.g3 {width:98.0%}
}
/* LANDSCAPE TABLET/NETBOOK/LAPTOP */
#media only screen and (min-width: 1024px) {
body {
}
/* 3 COLUMN GRID */
.g1 {width:31.333%}
.g2 {width:64.667%;}
.g3 {width:98.0%}
}
This is very useful if you would like to have a fully interactive website for all devices. These days it is common practice to use media queries.
Also media queries are very transparent through most browsers which makes them a 'good practice' to use. Check this out!
#media only screen and (max-device-width : 640px) {
/* Styles */
}
#media only screen and (max-device-width: 768px) {
/* Styles */
}
This is what I have so far. The PSD mockup for the mobile site I'm working on, is 640px wide. The other one, the tablet version of the site, is 768px. I was able to test the site in my web browser by only using max-width, but now it's time to get this site working on the devices, and it's still rendering the regular full size web page. The two queries above are my best guess. Where am I going wrong?
This can be done with Level 4 Media Queries: (Browser Support is quite good - CaniUse)
Interaction Media Features
The idea here is to target devices based on their capabilities. (as apposed to say, checking the size or resolution of the device which tend to be moving targets)
The pointer media feature queries the quality of the pointer mechanism used by the device.
The hover media feature queries the user’s ability to hover over elements on the page with a given device.
So to answer the question...
Mobile devices/tables are similar in that:
1) The accuracy of the primary input mechanism of the device is limited.
This means we could use the following media query:
#media (pointer:coarse) {
/* custom css for "touch targets" */
}
div {
width: 400px;
height: 200px;
color: white;
padding: 15px;
font-size: 20px;
font-family: Verdana;
line-height: 1.3;
background: green;
}
#media (pointer:coarse) {
div {
background: red;
}
}
<h2>The pointer media feature queries the quality of the pointer mechanism used by the device.</h2>
<div>The background here will be green on 'desktop' (devices with an accurate pointing mechanism such as a mouse) and red on 'mobile' (devices with limited accuracy of primary input mechanism) </div>
Codepen Demo
2) The primary pointing system can’t hover
So our media query would look like this:
#media (hover: none) {
/* custom css for devices where the primary input mechanism cannot hover
at all or cannot conveniently hover
}
NB: Chrome/Android prior to version 59 required the on-demand value for hover/any-hover media queries. This value was later removed from the spec and no longer required by Chrome from version 59.
So to support older versions of Android you need
#media (hover:none), (hover:on-demand) {
/* custom css for "touch targets" */
}
div {
width: 400px;
height: 150px;
color: white;
padding: 15px;
font-size: 20px;
font-family: Verdana;
line-height: 1.3;
background: green;
}
#media (hover:none), (hover:on-demand){
div {
background: red;
}
}
<h2>The hover media feature queries the user’s ability to hover over elements on the page</h2>
<div>The background here will be green on 'desktop' (devices which support hover) and red on 'mobile' (devices which don't [easily] support hover ) </div>
Codepen Demo
NB:
Even if you were to connect a mouse to a mobile/tablet, the hover media feature still matches none since their primary interaction mode doesn't support hover.
If we do want to take secondary devices into consideration we could use the any-pointer and any-hover features
So if we wanted mobile devices connected with a pointing device to be treated like a 'desktop' we could use the following:
#media (any-hover: hover) { ... }
Extra reading
Interaction Media Features and their potential (for incorrect
assumptions)
https://css-tricks.com/touch-devices-not-judged-size/
Edit Note: This is specifically a method that worked with older browsers. The accepted answer has been updated to a more modern CSS that does have media queries that makes this easy. I mainly suggest using my older code for CSS specific to older browsers.
Instead of using specific widths initially, or messing around with orientations, or any other nonsense, I suggest using the following media tag...
#media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi), only screen and (min-resolution: 131dpi) and (max-resolution: 133dpi), only screen and (min-resolution: 145dpi) and (max-resolution: 154dpi), only screen and (min-resolution: 162dpi) and (max-resolution: 164dpi), only screen and (min-resolution: 169dpi) {
/* Your touch-specific css goes here */
}
#media only screen and (min-resolution: 165dpi) and (max-resolution: 168dpi), only screen and (min-resolution: 155dpi) and (max-resolution: 160dpi), only screen and (min-resolution: 134dpi) and (max-resolution: 144dpi), only screen and (min-resolution: 120dpi) and (max-resolution: 130dpi), only screen and (max-resolution: 116dpi) {
/* Your click-specific css goes here */
}
And what do you use these tags for? To set stuff for hover & click vs touch events.
Touch devices, other than a few devices in grey areas above addressed, have a very different resolution than desktop devices. Do -not- this to set design elements, but navigation elements. Some pudents may cry that some insanity with max-width may be better, but there's so many HD phones it's ridiculous that device-max-width quickly becomes useless.
However, you should use width media width queries. However, don't bother with max-device-width, just max-width & min-width. Let the above tags address your touch vs not touch users, let min-width vs max-width address based on window size and adjust site visuals.
Further, using orientation to determine if it's mobile or not is just silly, as even monitors can be placed in various orientations (a common setup I've seen for 3-monitors is a portrait center monitor and landscape side monitors.)
For width views, focus on making your site clean on various widths, ignoring what kind of device is actually accessing it, just make sure your screen displays cleanly at various sizes. That's good design that applies to both desktop and mobile. If they have your site in a small window at the upper left corner of their screen for reference (or quick distraction) while using the majority of their screen real estate elsewhere, and it should be for them, as well as mobile users, that your smaller widths are built for. Trying anything else is quickly going down a very painful and self-defeating path for web development. So for those smaller widths, you can set your widths to whatever you want, but I'll include a few I personally like.
So altogether, you should have something like this...
#media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi), only screen and (min-resolution: 131dpi) and (max-resolution: 133dpi), only screen and (min-resolution: 145dpi) and (max-resolution: 154dpi), only screen and (min-resolution: 162dpi) and (max-resolution: 164dpi), only screen and (min-resolution: 169dpi) {
#touch_logo {
display: inherit;
}
#mouse_logo {
display: none;
}
/* Your touch-specific css goes here */
}
#media only screen and (min-resolution: 165dpi) and (max-resolution: 168dpi), only screen and (min-resolution: 155dpi) and (max-resolution: 160dpi), only screen and (min-resolution: 134dpi) and (max-resolution: 144dpi), only screen and (min-resolution: 120dpi) and (max-resolution: 130dpi), only screen and (max-resolution: 116dpi) {
#touch_logo {
display: none;
}
#mouse_logo {
display: inherit;
}
/* Your click-specific css goes here */
}
#media (min-width: 541px){
/* Big view stuff goes here. */
}
#media (max-width: 540px) and (min-width: 400px){
/* Smaller view stuff goes here. */
}
#media (max-width: 399px){
/* Stuff for really small views goes here. */
}
Although, don't forget to include the following in your page's head:
<meta name='viewport' content="width=device-width, initial-scale=1" />
It may still break on some cases, but this should be more concise and more complete than many other solutions.
You have your main desktop styles in the body of the CSS file (1024px and above) and then for specific screen sizes:
#media all and (min-width:960px) and (max-width: 1024px) {
/* put your css styles in here */
}
#media all and (min-width:801px) and (max-width: 959px) {
/* put your css styles in here */
}
#media all and (min-width:769px) and (max-width: 800px) {
/* put your css styles in here */
}
#media all and (min-width:569px) and (max-width: 768px) {
/* put your css styles in here */
}
#media all and (min-width:481px) and (max-width: 568px) {
/* put your css styles in here */
}
#media all and (min-width:321px) and (max-width: 480px) {
/* put your css styles in here */
}
#media all and (min-width:0px) and (max-width: 320px) {
/* put your css styles in here */
}
This will cover pretty much all devices being used - I would concentrate on getting the styling correct for the sizes at the end of the range (ie 320, 480, 568, 768, 800, 1024) as for all the others they will just be responsive to the size available.
Also, don't use px anywhere - use em's or %