I'm using the visibility-classes of Foundation (http://foundation.zurb.com/docs/components/visibility.html) in order to display my website differently on mobile devices.
However the more recent smartphones have insane scree-dimensions (e.g. Nexus 6 2560 × 1440 Pixel).
I don't have such a device and therefore can't test whether classes like hide-for-small-onlystill work there. Afaik small means less than 640 pixels.
So how can I deliver the same page across all smartphones? Even though these devices have huge screen-dimensions I'd still like to display a simplified homepage.
Foundation visibility classes are based on media queries that checks only screen width.
If you want to target mobile devices you can detect mobile device (not the best practice but useful many times). here is a good way to do it: http://detectmobilebrowsers.com/
once you detect the mobile user (on the back-end or front-end) you can add a class to your body and target that separately on your css.
Unfortunately, I don't think there an easy workaround this.
Related
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 a question that I have searched for hours and can't find any solution to my issue.
I am trying to make it so when you resize the browser the mobile versions and break points don't show when on a desktop.
So when you're on a desktop you should be able to resize the browser to a point where you will have to scroll horizontally, rather than showing a mixture of desktop and mobile version. apple.com does it where when you resize the browser it only goes so small and you never see the mobile version. Which you shouldn't because you're on a desktop.
Here is the site:
http://www.avrs.com/
To recreate the issue you can resize your browser and at about 1000px it breaks and is ugly. You may also say that I am doing the display: none; wrong which you are welcome to inform me of how to fix.
Also I am familiar with the http://getbootstrap.com/css/#responsive-utilities. But they didn't seem to fix this issue either.
There are several techniques to achieve what you want. The easiest is to use CSS media-queries with specific properties.
Usually min-width or max-width are used for the CSS breakpoints to make your website mobile-friendly (Responsive Web Design). If you want to avoid this on desktop browsers you can use different properties with values specific to mobile devices:
min-device-pixel-ratio
min-device-width
orientation
This source will provide more relevant information: article on css-tricks.
Another question is: Why would you want to make your website unresponsive and not user-friendly like that? In year 2014 I (and pretty much most of the users) expect websites to adapt to the browser's window size.
Scenario: I really like browsing websites with my browser on one half of the screen and eg. chatting with someone or watching a movie on the other half.
Consider this point. I think it's better to improve your website so it works nice in all different resolutions because you can never assume anything about your users and their devices (smartphones, tablets, netbooks, laptops, desktops…). Nowadays I can easily get a smartphone with higher resolution than my desktop computer, or a laptop with a touch screen.
The devs at Apple are using max-device-width (plus other media query rules, like dpi, min/max width, etc.) to determine if the mobile version will be shown. Because desktops typically have a larger physical screen, the max-device-width rules will rarely be shown on desktops (but it isn't full proof, as shown below - You'd want to look at adaptive design for a separation between desktops and mobile devices...)
You can test this by setting your resolution to something much smaller. Here's an example on my Macbook Pro at 720px x 450px (via Display Menu) running Chrome.
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've just finished reading yiibu's slideshow on their responsive site development for nokia, and one of the larger points of it seems to be to focus on mobile first, then desktops and other larger and faster platforms. ( http://www.slideshare.net/yiibu/pragmatic-responsive-design ) Not just in the planning phase, but literally develop your responsive design in the sense that the innitial styles, with no media queries applied, will be the design for your smallest platform, with the lowest capabilities. (older phones, depending on your audience) Which is backwards from what I've innitially thought to do (and from what I've seen, what others usually do as well).
The rationale was that this method would prevent people on mobile devices with lower bandwidth from downloading additional scripts and large images, by innitially downloading only the scripts and images needed for the minimum device, then loading more, and more, depending on the size and predicted capabilities of the device, eventually putting the most burden on the largest devices (laptops and desktop computers). --- This being contrary to what I've been doing, which is designing for the desktop, then adding media queries to optimize for mobile devices.
My question is, do I need to design for mobile first, then add media queries to optimize for larger devices with more capabilities in order to prevent the burden of downloading large images that wont be used on mobile devices?
.....Or can I just use sepparate stylesheets and call to a mobile stylesheet before calling to a stylesheet focused on larger browsers/devices?
The order of who you call first or not, shouldn't matter. The media queries by themselves are a bunch of if-else based on the criteria you place in them (device, orientation, width, etc). So by adding them first or last won't mean that a mobile phone will consider a style sheet for a desktop browser (example).
What you should do though, is to have the base stuff that is consistent across ALL devices (such as typography, font-sizes, background colors of elements, text color) on a base stylesheet that is readable to all devices.
This makes the actual reading of the file smaller as a specific stylesheet will be made for margins, paddings and widths depending on the actual size of the screen.
Last but not least, as to whether you should design the experience for mobile first or not, it's up to you, your way of working and what not. I know I don't. I design for desktop first and work my way down. I much prefer this.
The iPhone 4's Retina display is double the density of of the iPhone 3, but Apple handled it fairly nicely but just making an assumption and doubling the pixels when rendering (so that your web page looks the same physical size on each device). You can then use some webkit media queries to load additional CSS just for that device (-webkit-min-device-pixel-ratio:2).
The question: Is there a resource that a) lists the other mobile devices that are now using high PPI screens b) what the device does by default in terms of rendering web sites and c) if it supports the webkit check and/or it's own custom detection method?
If not, perhaps this post could become that resource (CW) by posting info on specific devices as answers. I have to start dealing with BlackBerry and Nokia devices that are using the high res screens (and Android coming along). Any data appreciated!
UPDATE:
After some testing, I'm finding that there really aren't any other mobile devices that identify themselves as double-density as the iPhone 4 does. There are screens with much higher PPIs now (often on smaller devices) but the device doesn't in any way declare itself as high PPI. Perhaps a better way to explain it is that those devices just have 'really small pixels'.
As such, there really isn't a practical way to handle those devices given that ALL sites are rendered the same, so any attempt at modifying yours will likely interfere with the user's own preferences and settings.
If anyone knows of any devices other than the iPhone 4 that properly declare themselves as high PPI, let me now!
See here for a similar quesiton:
How to target iPhone 3GS AND iPhone 4 in one media query?
I asked it a few days back, I don't think there is a list of such things but if you know the devices you want to target it is not hard to find out and thus target these devices.
The best detection method is to use CSS3 #media queries, and given that Opera is the most popular mobile browser it is a safe assumption to use the webkit extension along side the #media queries.