Im doing some simple styling between different mobile devices and was wondering whats the best way to change depending on the resolution.
As my application looks fine on low resolution devices, but on high the fonts to small and other things are to small as well.
I was thinking of one style sheet depending on resolution but was wondering if this was the best way or is there better ways to implemented this situations.
The devices are all blackberry from new to old hence the high and low resolution.
Is there anyway even just to scale content up if the screens bigger?
Thanks
You can use media queries to target different screen sizes in CSS.
Here's a list for Blackberry devices http://responsive.co.za/blackberry-specific-media-queries/
You can do all this using CSS3 media queries.
Here are some resources
http://brendanmckenzie.com/2012/06/there-is-no-mobile-framework
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
http://html5boilerplate.com/mobile
You should create media queries like they said but if you are doing this for a large number of devices and/or your css file becomes very long, I would do it with if then statements so that each device doesn't have to download a huge css file that contains all of the media queries for every device.
Related
I am using max-width: 768px to change looks on my website. But there are many high resolution devices on market (4K Mobile phones etc). How can I detect them? should I use orientation portrait? Or can I specify a aspect ratio as a code? What is the best way to catch all devices for responsive web design?
You have multiple options for this problem:
Within your media query you can test for the device width, resolution (pixel density), orientation, aspect ratio, pointer option and many more. See https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries for a full list of options.
It is recommended to support your implementation by feature and not by environment. For example you can target dark/light mode or if a device supports hover events instead of checking for phone, tablet, desktop, tv, gaming console …
Also you can combine different CSS units like em, vmin, vh, vh, % to get relative measurements.
This in combination with CSS grid can already solve many problems without defining a media query.
Of course in the end you probably still end up with some media queries. For that I recommend to pick 2-4 common screen sizes even though this is no guarantee that it will cover all devices.
I can also recommend you these episodes from The CSS Podcast
#rules
Preference Media Queries
I've been researching for a while now, but there's still something I cannot understand.
Many websites (1, 2) suggest some common breakpoints to use for media queries when we develop for smartphones.
Despite the debate between pixels, ems or rems (I usually use ems), the problem is that nowadays smartphones have increasingly high resolutions, up to 1080p or even 1440p.
It seems to me that this makes pointless differentiating the different types of devices using media queries, since modern smartphones have the same pixels width of many older desktops.
Writing a media query using #media (max-width: 600px) (or 37.5) doesn't make sense anymore, since (I tested it using my smartphone) it doesn't get triggered.
I cannot just increase the breakpoint level, since some older desktops or tablets have a lower resolution than modern smartphones. Furthermore, I would have an huge breakpoint going from 0 to, let's say, 1080px (which is still not enough).
I know about #media (hover: ...) but I didn't see anyone suggesting it for breakpoints and I couldn't find it anywhere peeking into some big websites' CSS
Am I missing something?
How do modern websites distinguish between smartphones and desktops?
Please don't attack me if I'm asking something stupid... I know that I could missing something easy but I cannot just get it. Any answer would be appreciated.
Thanks in advance.
Even though mobile screens might have high resolutions, it doesn't matter - because the pixel density is the important thing here.
As long as you set your viewport to support mobile devices, media queries would work as you expect (using small numbers such as 600px).
You can read more about the meaning of CSS pixels on MDN.
I'm making a website and want the font size to be readable on mobile, desktop, and also when printed.
I find the default font size on my desktop looks good on desktop, but is way too small in mobile (and often I notice default fonts are way too big when printed).
What's the best practice for setting a font size that is legible on mobile, desktop and print?
Generally speaking you can accomplish this one of several ways. Two concepts that come to mind would be to have a stylesheet that is for web which would control your desktop, tablet and mobile styling. You can then have a separate stylesheet that targets print which is a less complicated stylesheet. You can also use media queries to target media type also. A reference for how to accomplish this can be reference by visiting https://www.w3schools.com/css/css3_mediaqueries.asp
I am buillding a website which looks great on a desktop however when i view it on a mobile it doesnt really work. I was wondering how I could set up a method/system which would automatically load the mobile site when being viewed on a device. Is there a way to do this? I have no problem with building 2 different sites but I would just like it to be automatic.
If you take a look you will see what I mean -
redchevron.co.uk
Thanks
As a general rule, you shouldn't build two separate sites if you can avoid it. The general best practice is to use responsive design techniques to build a single site that automatically adapts its appearance and behaviour to suit different devices.
To automatically adapt the layout and styling of your site for devices, use CSS Media Queries. That's a big subject - so here's some places to start your research:
Beginners guide to responsive web design
Media queries for standard devices
Mobile first responsive design
In short - Media Queries allow browsers to use styles (and ignore others), depending on properties of the device displaying the site. For mobile, the most common technique is to set up a media query for screens smaller than x pixels wide, and include your mobile styles within it.
To adjust behaviour for different devices, you can use javascript to detect various attributes of the user's device (is it a touch device, for example), and adjust to suit. It's worth noting though, that your site's functionality should work without javascript - it's important to create a solid, HTML only site as the foundation for whatever other work you do.
I'm building a small site for a company, and would like to build a version optimised for smartphones with full internet browsers (iPhone/Android etc).
I'm leaning towards media queries, because this is supported by webkit which most of these seem to use.
Is this the best? If so, what media query would be the best?
I'm leaning towards:
#media (max-device-width: 480px)
If your site can adjust everything you need via CSS you should be good.
Keep in mind the things that differ in the mobile web:
Overall width/height is much smaller
Font-sizes are typically made bigger for readability
Flash isn't supported across many devices (cough iphone)
Strip anything that isn't needed don't waste bandwidth on things mobile users don't care about
add mobile-friendly attributes to phone #'s for easy dialing
That said, once you get into it you may find that you really want/need to provide a different "View" for the mobile users... e.g. redirecting them from example.com to m.example.com and altering the content on the page dramatically. If you are using an MVC-like framework you should be able to make a set of simplified views for your pages that are optimized for mobile devices.
Example sites (Desktop vs. Mobile vs. Touch-optimized)
Digg: Full | Mobile
Yahoo: Full | Mobile
Facebook: Full | Mobile | Touch
For touch phones, create a jQTouch version.
For keyboard phones just make a stylesheet optimized for small screens.
For the iPhone and Android, I wouldn’t bother as they both have fully functioning web broswers. (Unless the site is Flash, iPhone only.)
You should be able to target any device you want with a custom CSS file, for stuff like a Blackberry etc.