Community Forums › Forums › Archived Forums › Design Tips and Tricks › Which devices do these refer to?
Tagged: mobile width, responsive design
- This topic has 5 replies, 3 voices, and was last updated 7 years, 8 months ago by Angelique.
-
AuthorPosts
-
August 17, 2016 at 3:28 pm #191487AngeliqueMember
I have Modern Studio Pro, which is supposed to be a "mobile first" theme.
Right out of the box, there's a lot of styling going on under
@media only screen and (min-width: 930px)
, and a little under @media only screen and(min-width: 1100px)
. There isn't any mention of a smaller min-width, which I know is used for phones.I've discovered that even for desktop, I need to make changes to my site by changing the styling in the media-only section. But to which devices do these sections refer? Is 930 phone and 1100 tablet? I've read that desktops should have a min-width of 1024, which is why this is extra confusing.
The main reason I care is that I'm concerned about how my home page will lay out on phones. Already my slider is not being responsive enough (in portrait mode the sides are cut off and the pause/play button is missing.) My home page (which is full-width) is going to have clickable graphics, some of which will be side-by-side, and I can't image having that without writing special CSS for phones.
http://itsolutionsbycmit.comAugust 17, 2016 at 8:18 pm #191495GingerParticipantHi there,
Mobile first means that the CSS's "default" size is for zero and up basically until it hits one of those "min-width" values. Meaning, if you see some styling without any screen sizes, this is the default size. Then each media query it hits with the "min-width" value which in english says "if you're viewing this on a screen size of at least ###, use this styling".
The numbers are the screen widths of a device. If you're targeting Apple devices for example, the skinny iPhone 4 and iPhone 5 are 320px wide. The iPhone 6's are 400 and up, I cannot recall the exact number off the top of my head. Normally you won't need to have settings for each device, you can pick ranges. The iPad original sizes are 768px wide when it's portrait (tall) and 1024px in landscape (wide). Up from there is your small laptop sizes and so on until you reach "desktop" size which is often over 1200px.
My advice to you is when making changes, change your browser to emulate the screen size/device you need then you can troubleshoot using Inspect or Inspect Element. I use Chrome for my Browser and if you right+click and select Inspect, you turn on developer tools. You can click on the top left of the half-window where it says ""Toggle device toolbar". Then you can select the mobile device from a dropdown. You can see what styling.css is being applied on the right side of the screen.
Also if you google responsive design simulators or viewers you should find a bunch. Even StudioPress has one that lets you view multiple screens at a time:
http://www.studiopress.com/responsive/
Hope this helps!
@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options
August 17, 2016 at 10:22 pm #191505Brad DaltonParticipantThis tool will give you the exact dimensions for each screen size which you can then use in Media Queries.
August 18, 2016 at 5:01 pm #191563AngeliqueMemberThank you for the information! Brad: That is a very awesome tool, better than the one that comes with my theme. If I understand the information correctly, it sounds like it's better to always specify a range, especially if you definitely want a different layout in portrait mode (the way most people use phones) than in landscape.
I wondered about how well my site would work in portrait mode for tablets, and then I found this code:
/* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ }
I've never seen the "orientation" style before. Is it a standard that works all the time?
I also found
(-webkit-min-device-pixel-ratio: 2)
for phones and non-retina screens and(-webkit-min-device-pixel-ratio: 1)
for retina-screen laptops and iPad minis. Is this also standard to add?There's even code for watches! WHO BROWSES THE WEB ON A WATCH? Do they have, like, telescoping eye-implants or something???? I will not be creating styles for watches 🙂
August 19, 2016 at 12:27 am #191583Brad DaltonParticipantHere's a good resource https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#orientation
I would test the CSS to see what works best on different devices.
August 19, 2016 at 4:22 pm #191628AngeliqueMemberBrad -- That's interesting! Using "media all" with either portrait or landscape would definitely cut down on the amount of code I would need, if it works well. And according to this, I shouldn't be using any pixel-ratio specifications.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.