I'm trying to build a responsive website for ipad and mobile as well.
This is the Link if you want to check it out.
Anyway, when I use the devTools in chrome for checking out the layouts on the Galaxy S5, then the landscape view is all good. When I check it on the actual device, then the height seems to be a bit less, and some parts of the website are actually cut out. Probably due to some parts of the device not being accounted for in the height.
Screenshot from the chrome dev tools, using the width and height of the S4 mini viewport when in landscape mode:
Screenshot from the actual device in landscape mode
So the questions are:
How do I actually use the devTools in Chrome to get a precise
representation?
Do I need to actually account for browser size in the #media (min-width: whatever px) query?
Is my question wrong from another perspective I haven't considered? Am I missing something?
Related
I've built my website using Bootstrap 4. There were some issues with the responsive design so I used media queries to fix those issues. The whole time I'm using Chrome's device toolbar to make the changes to the CSS. While using the device toolbar everything looks as I want it to but when I resize the browser outside of the device toolbar the media queries no longer work. I've tried this in both Chrome and Firefox.
I've prematurely made my site live to see if the issue would still persists when live and the issue is still there. Has anyone encountered this before?
Lakhan Production is the URL. I would greatly appreciate any feedback and insight. Thank you in advance.
In your media queries, you used min-device-width and max-device-width: The device width measures the device (phone, tablet etc.), not the browser window. That's the reason for what you describe. The mobile developer mode of Chrome apparently also emulates the devices that way.
I would rather use min-width and max-width instead of min-device-width and max-device-width
I have a general question regarding css:
i want to add media queries to adapt to different screen sizes. But how do I know what values to give the different queries if i cant see it on the respective screen size?
is there a way to do preview how my content will look?
You can google chrome's inspect tool by clicking right on a webpage and click the little phone icon in the top left corner to view your website on various device sizes.
You can enter Chrome's (or Opera's) dev tools and activate Device Mode to simulate different screen sices. I like to use the responsive mode that allows you to drag and resize to check the behavior across different sizes and the Media Query ruler that shows you the CSS break points.
Other browsers have similar tools, like Firefox's 'Responsive Design Mode' or Edge's 'Emulation', both accessed through Inspect Element.
Yet this simulations don't guarantee to behave 100% like the devices.
Most modern browsers have device emulators in their Developer Tools. For Chrome you can find the documentation here: https://developers.google.com/web/tools/chrome-devtools/device-mode/
For even more cross browser/device testing you can use: https://www.browserstack.com/screenshots
Still nothing beats setting up a device lab, where you can physically test on some of the most popular devices.
Hope that helps,
You can use tools like this, to test it in different devices size and resolution.
https://screenfly.org
Problem:
iOS8/Safari doesn't seem to understand / support media queries containing viewport units like: (max-height: 175vw). It works just fine on iOS9 devices though. I tried using max-aspect-ratio and max-device-aspect-ratio but they're also being ignored.
Does anyone have any idea why this isn't working or know of any other way of creating media queries that are not tied to proportions/aspect ratios instead of specific screen sizes?
Explanation (or, why do I even need this?)
We're working on an ios/android app using Cordova and instead of having to worry about breakpoints and all different screen sizes, we decided to use viewport units quite extensively and only worry about a few aspect ratio / screen size proportions.
So, right now, the styles we have work fine on devices like iPhone 5, 6, 6+, most Android devices (and any other device that share these proportions or anything in between).
Now, devices like iPhone4 and iPads have considerably different proportions; they're more 'square' per say. To account for that, we just need a media query for 7/4 and below proportions and (max-height: 175vw) works just fine on iOS9 and Android devices (we're using Crosswalk for Android, so consider Chrome too), but doesn't seem to work on iOS8/Safari.
Update:
Just had an idea. For now I'll use (max-height: 175vw) and that should fix all Android devices (at least 4.4 that we're supporting) and iOS9 devices. After that, I may just need an extra media query for iPhone4 and/or iPad.
It seems like aspect-ratio is supported for media queries by now, as I have just tested in the current versions of Firefox, Chrome and Safari (see demo).
#media screen and (max-aspect-ratio: 1/1) {
.landscape { display: none; }
}
Please take note that you have to specify the ratio in form of a division (e.g. 16/9). Floating point values (e.g. 1.7777) will not supported.
Of course, in a media query, min-aspect-ratio is functionally aequivalent to max-width with the corresponding value in viewport units (vh) – but better supported by browsers.
Until viewport units are really supported, you can use cordova-anyscreen to accomplish what you want. https://github.com/biodiv/cordova-anyscreen .
You will also be able to support Android down to 4.0, maybe even 2.3 (which might not be important) and iOS 6+.
Proportional Layout is done in reference to a screen with the dimensions 1080*1920. So if you want 50% width you would use 540px. The display is measured by the script and it recalculates the 540px matching the screen.
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'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 ;)