I am testing my site in all the mobile emulator in chrome.
Here moto g emulator is not available. My testing team is saying issue in the moto g. Can some one help how to test for motorola.
Thanks in advance.
I don't think Mibit has it quite right. While the Moto G may have a screen resolution of 720 x 1280, websites don't display at this resolution.
The CSS spec defines what's called a reference pixel, which allows devices with high density displays to show the same content at a similar size as displays with a lower pixel density. The reference pixel is used for all CSS and website rendering, and determines the viewport size.
The viewport size of the MotoG3, for example, is 360x640. The device pixel ratio is 2, which means every css pixel that the web sees is actually 2 physical screen pixels wide, or represented by 4 physical pixels. This is why the correct emulator settings for chrome to emulate a MotoG3 is:
Screen Size: 360x640px
Device Pixel Ratio: 2
User Agent (Can vary depending on browser): Mozilla/5.0 (Linux; Android 6.0.1; XT1540 Build/MMB29U) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.81 Mobile Safari/537.36
To show the difference between using the physical screen resolution and the reference pixel resolution in the emulator, the following screenshots show what google looks like in both of these configurations:
You can clearly see that using 360x640px and a DPR of 2 correctly emulates what should show up on a phone screenn
The only thing the "emulator" does is emulating screen resolution and pixel dimensions.
Customize the screen settings:
Click the values and adjust them. The Moto G has a reolution of 720 x 1280 pixels and set the pixel dimension to 2 or 3.
Custom Device
You can add a custom device if you find an edge-case or niche device. Just do the following:
Go to the DevTools Settings.
Activate the Devices tab.
Click on the "Add custom device" button at the bottom of the panel.
Fill in the form that appears at the top of the list.
Press "Add Device"
Enable Device Mode and find your custom device in
the device menu.
But keep in mind that the "emulator" does have limitations - you cannot test everything regarding:
Device Hardware
Browser UI
Browser Functionality
App Cache
You might want to take a look at something like Mobilizer from http://mobile1st.com so that you're testing pages on real devices, not emulators, as emulators are often showing inaccurate results.
Some of the main issues with emulators:
-A "Keyhole Problem" happens when the site isn't zoomed to fit the phone and still has all of the same content. This makes mobile users feel like they're looking at your site through a keyhole.
-A lot of responsive testing sites use iframes to emulate devices. Unfortunately, many sites have settings that prohibit the browser from rendering them in an iframe, resulting in a blank screen.
-Different browsers and operating systems render default elements, such as buttons and scrollbars differently. While the differences can be minor, they could have a huge effect on your UX.
-It's becoming increasingly popular for websites to have video. However, a lot of phones don't have the player installed (i.e. flash) or have a hard time playing it with the default browser.
-With responsive design taking off a lot of companies have abandoned having a separate mobile site. However, there are some mobile-only sites out there and emulators often give the wrong version.
Hope that's helpful.
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:
I have website which is having layout issues on certain devices which I believe I've tracked down to high res displays which also have the display scaling in windows 10 set to 200%. (not 200% in the browser, but in the display settings in the Windows Control Panel)
The problem is I don't have a device which can duplicate the resolution of these devices, which is 2736 x 1824 (it's a MS Surface Pro). Oh yeah, this only happen with Edge...
I know of sites which have VMs which will run different browsers for testing purposes, but I don't know of any which allow you to choose your resolution. Without going out and getting a hold of this specific machine, how else can I debug this issue?
You could create a custom device in the developer console, and simply display it at whatever scale actually fits on your screen. For instance, create a custom device with that particular resolution, then in the developer console on Chrome you can view it scaled down 50% (if your own resolution is 1920x1080) so that the whole thing is visible.
Turned out none of the emulation/scaling options in the dev console would emulate what was really happening. I ended up remoting into the customer's computer so I could do my own debugging on there and resolved the issue.
Seems like Edge v 44 was computing some CSS calc function for a div height incorrectly (off by 1 or 2 pixels) which was making some divs push out and mess up the layout.
The fix was to tweak the CSS so the calculation wasn't required.
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 have a screen with resolution 1680 x 1050.
I work as a web developer and while building websites, we use font-sizes that are easily readable on laptops with resolutions ranging between 1366 x 768 to 1920 x 1080.
While using Chrome developer tools, I chose Amazon Kindle Fire HDX which has resolution of 2560 x 1600. On this device (which chrome is simulating), the font-size renders very small due to high-res. I tried many font-size units such as vw, vh, % so that the font-size appears same on all resolutions but failed.
I even opened StackOverflow using Chrom Dev Tool and saw the font-size appearing to be too small. I don't know if the font size that appears on the real Kindle HDX is the same as what I'm seeing on Kindle HDX that chrome is simulating and I don't have a real 2K res device to test my websites as well. How to counter this issue? I want my websites to be readable on all resolutions.
If your font sizes are in relative units then you are likely just fine.
I think what you are seeing in Chrome Dev Tools is the "Zoom to fit" feature that will zoom the page of the targeted device to fit your browser window. Uncheck "Zoom to fit" and I think you will see the text is legible. And take notice that the ruler values will change to be more accurate representation as well.
You can see in this screenshot that the rulers indicate that the device simulation is being rendered at 1600px wide even though this screenshot was definitely not taken at 1600px wide. It was zoomed to fit my window.
I suggest you use em as the unit for fonts to make it more cross-browser/device compatible. em should work off the browser's own built-in font sizes to make things more readable as well as the browser's zoom settings.
Also, you may want to try out various CSS frameworks that may try to handle more consistent cross-browser/device consistency to keep fonts at more relative sizes according to device/dpi settings. (Unfortunately, I haven't experience in this scenario, but should be a good place to start your research).
Is there any way to make a preview of our template in other monitors like 14 or 15 inch monitors ?
Is there any simulator program ? I want to check that there is no horizontal scroll on screen when my web site opens .
This is a pretty quick way to test a bunch of different device viewports
http://www.benjaminkeen.com/misc/bricss/
Best of all - You can define your own viewport sizes.
I want to check that there is no horizontal scroll on screen when my web site opens .
There are several browser plugins that will simulate a resolution change by resizing the browser window. Window Resizer is one for Firefox.
Other than that, you can change your monitor's resolution to test what a site looks like on other screens. (What counts is the screen resolution, not monitor size.)
ResizeMyBrowser is my go-to for this - I just keep it open in one tab and whatever I'm working on in another, and it's easy to see all the options 'live'.
Another solution for testing your site on different resolutions is Sizer
No problems with resizing all modern browsers (32 and 64bit Windows), even their 64bit versions.
Firefox now has a native developer feature that supports resizing the viewport: Open the Firefox command line with Shift + F2, then type "resize on". Now you have a frame within the former viewport that can be shifted to the extents of your desire. You can also call a certain viewport size by entering "resize to ".