I'm trying to see how my web application (using Bootstrap 4) will look like on different devices. So, I use Firefox Responsive Design mode to check it out.
The problem I'm having is how to also account for Windows 10 Display Scaling (found under "Scale and layout" in Desktop settings)?
*On bigger monitors nowadays users mostly use at least 125% or 150%.
Related
I am using Google Chrome and to test the resposiveness of the webapp I am working on. As on date today I have:
Google Chrome - Version 88.0.4324.96 (Official Build) (64-bit)
Mozilla Firefox - Version 84.0.2 (64-bit)
Chrome offers zoom percentage 25-500% while Mozilla offers 30-300%.
I am noticing these percentage ranges for a while.
Question:
What is the correct range of min and max percentage to test the responsiveness of the css/html for majority of devices ranging from wide screens to hand held devices - say curved ultra wide screen desktop monitors and ultra high resolution laptops to all the way down to mobile phones of iphone8 size screens or similar?
I am asking as now a days in UI/UX world every business and project management team is concerned about the responsiveness of application's pages on all screen-sizes of the devices. And we may not have all the devices handy to get even a "fake" confidence how the application will behave on different screen sizes. Our development machines are all windows based and do not have Safari at all. So now the question becomes, is there some way we can rely on a specific browser's zoom in-out percentage range to get an idea of the expected behavior?
I would recommend using the Device Toolbar within Chrome developer tools. You can adjust the viewport size to simulate different devices.
This works well when you need to simulate devices that are larger (and smaller) than your current screen.
My current laptop display resolution is 1920x1080. If I want to accurately test a device that is larger, let's say 2048x1536, I can adjust the viewport width and height to 2048x1536 within Chrome's developer tools:
Now look at a screenshot from BrowserStack that is showing a real 2048x1536 screen size and notice that it matches perfectly:
Link to app
I've written the media queries to make the app responsive and they looked fine when I'm viewing them via Chrome DevTools. First screenshot is from Chrome DevTools, second is from my iPhone X:
Iphone X has a screen size of 325x812, which is the first difference.
Secondly, G Chrome Dev is an emulator, which means it only simulates what a page will look like on a specific device. It does not account for hardware and software (say which browser you're using). They use different rendering engines, so deviations are bound to occur.
I checked the URL, you are using react to make your page responsive which takes care of your application to be visualize properly on all the screen size.
You have design correctly only, you don't want your users to open desktop view in mobile.
//Initial situation - What I have and what I want
I am using WordPress version 5.1.1 with the Elementor Page Builder Plugin version 2.5.8 and I want to make a responsive website looking good on both desktop and mobile, tablet as well.
So I have a section with two columns within the row where below is the same system for 2 more times on desktop view. When it comes to mobile, I want a different adjustment.
so the trick I use is, I duplicate the widget and align the elements within the second section and set the first one to hide on mobile and the second to hide on desktop and tablet. So far so good, it seems all working.
//The problem - What doesn't work and needs to be fixed
As I told above, the system I use seems to be working, on mobile it only shows the second section, on desktop only the first. Tested on 100% size in the windows display settings and zoom in the browser and separate browsers.
BUT When it comes to 125% in the windows display settings and I split the page via the windows function to half of the screen, it shows both sections which either doesn't look good and really isn't what I want and need. It only happens with Google Chrome browser, all others "decide" which device it's using at the moment, only chrome shows on 125% AND half screen at the same time both sections.
What can I do / How can I fix this issue?
Edge eg. sets on the half screen to tablet while Chrome is still in Desktop.
MAybe it has something to do with Madia breakpoints? Can I change them in WP-Settings?
Thanks in advance and best regards!
Edit: Pictures to show what it kinda looks like:
This is the standard desktop view of this section
This is the standard tablet view of the second section
This is how it looks in Google Chrome 125% Windows 100% Browser Zoom Half Screen
Don't have any manual media queries, they're all standard. Works with all on 100% Windows resolution, only on 125% Google Chrome it's weird.
I have been trying to make a responsive website for mobile devices . I have found two ways to test responsive design:
By resizing the window
Using Google Chrome developer's tools
In both of them I get a different view. Which one gives me the right view, as I use font-size and padding in 'em'.
Resizing browser window is not Responsive. While developing Responsive applications the easiest, but yet not perfect, way is using Chrome's Developer tools. Even that may give you different results, because mobile device screens are using not just width/height but also dpi. So 320 iphone6s screen is not going to be perfect match for 320px resized browser or equivalent android device.
Go for chrome developer tools. It's a great way of checking responsiveness. It comes with dimensions of popular mobile and tablet devices. So you can check for a variety of device at once.
Simply resizing the browser is not a right way of checking responsiveness.
Recently I built a page that works fine with both the ways you mentioned. You can check it here.
Let me know if you need any help.
I would say Chrome Dev Tools is the best bet for a local snapshot.
However, if you have access to one or more mobile devices you may want to launch the site on Heroku or another production environment and view it from the actual device.
An iPhone 6 for example, I find Chrome does not take into account the address bar or bottom nav in safari so things can be slightly off from the Chrome Dev view of iPhone 6.
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.