I'm designing a website using media queries and have everything looking good on desktop and my iPad...but my phone is a different story. The pixel dimensions are 1024x768 because it is a newer smart phone, so it is trying to display it like my tablet. How can I use a media query to specify that my phone at 1024x768 should display differently than my iPad? Thanks for any help.
Here's what I've been working with to start:
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
Initial thoughts
Some additional information on the exact layout problem on your phone would be helpful. Also, do make sure you are using the proper <meta> tag (as #Lokase suggested). A good run down can be found here.
Two possible solutions
Usemin-height and max-height in combination with the
width media queries you are already using to attempt to target
your phone.
If that is not an option, you can use javascript to target your
phone by attempting to detect the user agent, but this can be hit or
miss.
A word of Warning
With all that said trying to design for specific viewports will lead to endless frustration. A more time intensive you may need to step back and rethink your layout, and how you are using media queries. This can be a pain to implement, but you will thank yourself in the long run. Just consider the number of high resolution android phones in the market now, and how many are going to be shipping soon.
Related
I might be completely off the mark, but here goes:
I tried testing my website with various modern phones and tablets... and the result is that my media queries never come into effect because these phone/tablet resolutions are too high.
Things like #media (max-width: 767px) { }, which I want to display for phones, never come into effect because of this resolution problem. Any ideas on how to solve this? This can't be an uncommon problem so I feel like I'm overlooking something.
Configured correctly, "retina" screens take the increased resolution into account when rendering web pages. I'd take a look at Bootstrap, purely as an example of how to setup your page to be fully responsive.
You'll find once you have this setup, it will work regardless of the actual physical resolution of the device. For example, the first iPhone to have a retina screen (iPhone 4, perhaps?) had a "width" of 320px, regardless of the fact that it's resolution was far higher than that.
I am a beginner and have been working on my first responsive site with media queries.
A site I was reading told me some standard ones were
768-1024 for tablets
320-480 for smart phones.
I used these to begin, However, when I open it with my note 3 I get the tablet version and the menu is too small for it. This same result happens with an iphone 4.
Even when I changed the smart phone range to 320-767, both phones still are using the "tablet" layout. The note 3 has a width of 720 correct? so with this it should force it into the smart phone query right? Am I misunderstanding this? How can it tell the difference between something small but with a high resolution like the note 3 to a tablet so that I can have larger elements on the note3?
If someone could explain to me what is going wrong here I would gladly appreciate it.
The note 3 has a 1920x1080 resolution, not a width of 720 pixels.
Instead of selecting pre-defined values for targetting specific devices, it is recommended to use values suited to your content specifically. That way, all devices can expect an appropriate layout, usually with more simple media-query rules too. There are just too many devices out there today to pick specific values.
Yeah #rwzy 1920x1080 I should say. He must design first in mobile then going larger on desktop and tablet, He must choose Breakpoints based on the content not on defines screen sizes.
If you are creating your website based on the screen sizes only well use media queries also if you based it on resolutions also media queries best suite your problems. try http://www.hongkiat.com/blog/css-retina-display/
I have been looking into media queries, but so far all the examples I can find on google and Stack Overflow have been to use specific sizes (max-width, max-device-width, etc.) The problem with this is that it doesn't give me the flexibility I need. I want to be able to deliver a ** specifically tailored** experience to desktops and tablets.
The reason I want to do this is that interacting with a tablet is different than interacting with a small computer monitor. An iPad in landscape orientation is 1024x768, which also happens to be a common computer monitor size. The difference however is that on a computer, pointing to small controls with a mouse is easy, but it is very difficult to tap the same size controls on an iPad, especially for someone with large or clumsy fingers.
How can I deliver a tailored experience to an iPad user vs a desktop user with a monitor of the same size? I'd like the desktop experience to not be forced to use jumbo sized buttons that a touch experience requires.
Is this possible with media queries, or something else? I see that there's a "handheld" option for media queries, but I've read that most small device browsers ignore this.
It's not possible with media queries. There is a "handheld" media type, but most, if not all modern handheld devices identify themselves as "screen".
To do it with javascript, see this question:
What's the best way to detect a 'touch screen' device using JavaScript?
I'm having a problem with my media queries where I want to target phones, tablets or computers. the problem is that today some phones and tablets have a high screen resolution.
I can´t seem to find a proper combination to achieve this. Could you help me and post the queries that you guys use for your websites? I've been working on these for days, to no avail.
Should I use some JavaScript library for this?
UPDATE:
I found a very good jquery library that seems to be very reliable with today's devices. And even though it is not being developed anymore, I found that it successfully detected all the devices tested, regular phones and tablets, high ppi phones and tablets, and desktop or laptop computers.
Try it out, and see if it works for you too
Categorizr
There is no way to make everyone happy. For our upcoming responsive website we used a few breakpoints
768px
1024px
1280px
1920px - is our biggest, we cut off at this point
We have our server output classes on the body to detect classes (can be done with modernizr I think, never used it), for example, .iphone, android, .mobile, .phone, .tablet
So if you are using an iphone we would get
.iphone and .phone on the body tag
For some pages we also defined breakpoints at 320px and 480px
We use jquery for everything, just a warning, jquery runs fairly slow on Samsung tablets, man do we hate that device
Example of media query (we use LESS)
// normal styles
#media only screen and (max-width: #maxTabletWidth) {
// less than 1024px styles, yes I know 1280px is also tablet
}
#media only screen and (max-width: #maxPhoneWidth) {
// less than 768px styles
}
Good luck
Having built quite a few responsive websites, I find that instead of specifying 'x' width for a desktop monitor, 'y' width for a tablet, and 'z' width for a mobile; it's better to use breakpoints to ensure your site works across all browser sizes.
That said, a good site to look at if you're interested in various screen sizes is screensiz.es, where you can see popularity stats as well as their physical pixel widths.
Being device agnostic means that you won't have to readapt designs, and builds when Apple, or Samsung release their super thin, or super chunky devices.
A final suggestion to aid the functionality on the variety of devices would be to employ something like Modernizr to detect touch events.
Hope that helps.
I wonder if you are using the right tool for the job. Responsive design lets you stop trying to target specific devices or guess what the specifics of the next iPad / smartphone will be.
Set the break points to manage the layout of your design at different viewports and you are 90% done ;)
I have a media query -->#media all AND (max-width: 1024)..which works well on a Samsung tablet, but I need this to only apply on th tablet and not on the pc. If the device is a pc, it should only #media screen and (max-width: 768px).. how do I go about it?
you can not check for the device (pc, tablet, handheld) with media queries, only for the device width (more, i know, but op ask for device-width).
Maybe this article will help you understand more of it?
Media query should never be device specific - you simply say 'for an output of this size do this, but for an output of a different size, do that'. Whether it's a phone, PC, tablet, kiosk, watch or anything else should be irrelevant. For this reason, media query doesn't enable you to query hardware as such.
You may want different behaviour (rather than style) based on device capability, e.g.. is this a 'touch' device? But that should be managed in JS rather than CSS.
What is the actual goal of your query? Does it matter that the CSS is applied to a PC as well as a tablet?
The short answer: you don't.
The longer answer: you're going about it the wrong way.
It's easy to fall into the trap of using screen widths to target specific devices, but that's an Alice in Wonderland rabbit hole. Why? Because the widths of mobile devices overlap with the widths of desktops.
For example, here are a list of screen widths, can you guess which ones are desktop?
1024
1366
1200
1080
Guess what? I bet you're wrong about your guesses. 1024 and up seems like a "desktop" resolution, but iPhone 5 Retina is 1136x640, and the 3rd generation iPad is 2048x1536. To make things even more complicated, many people on desktops don't keep their browsers maximized, so device width does not equate to browser width. And what happens on the Kindle, which has a higher resolution, but also increases the text size?
And more devices are coming to the market on a regular basis.
So, your best bet? Abandon the idea of targeting specific devices or device classes altogether. If you absolutely have to, use JavaScript to look for touch screens (as that's the most likely reason you need to adjust the interface specifically for a class of devices).
You can still use media queries to target widths (or better yet, in my experience, use proportional media queries), but don't expect it to necessarily work on a given device.