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).
Related
I'm working through Mozilla's tutorial on responsive images. Part of the tutorial explains how you can use the responsive design feature of a browser's developer tools to see the pixel demensions of an embedded image on various display sizes.
It asks students to view their demo page in a browser, and open up the responsive design developer tool. I'm using Chrome and did just that. I then set the screen demensions to 320 X 480, and inspected the first picture in the body of the page. However, Chrome says the dimensions of the picture are 800 X 464. How can that be if the screen itself is only 320 X 480?
Furthermore I tried it out in Firefox, and Firefox gives 280 X 162.4.
So:
What are the units for all those demensions? I presumed all the dimensions were in pixels, but a fractional pixel doesn't really make sense.
Assuming the units are all the same, why is the picture larger than the screen in Chrome, and why does Chrome disagree with Firefox?
In general, mobile browsers use the following strategy to display web sites that were not mobile-optimized: they render them as if the were displayed on a small desktop (i.e. on a "virtual viewport", usually 800 to 1000 pixels wide), and then scale the result down to fit in the mobile screen. There is a classic article "A tale of two viewports" (particularly, part two) by Peter Paul Koch that explains it well.
It appears that the Responsice Design mode of the Chrome's devtools assumes that this behavior is happening and the "virtual viewport" is 980 pixels wide. Firefox doesn't do this, making the virtual viewport equal to the actual window size. Setting <meta name="viewport" contents="device-width"> makes all browsers (including real mobile ones) do the latter.
So:
The units are CSS pixels before the scaling. Non-integer pixels make sense for calculations, when browsers renders them they get rounded.
The picture is larger than the screen because the virtual viewport is scaled down. This can be prevented by setting <meta name="viewport" contents="device-width">.
Mozilla Firefox developer tools is showing you the size of image which is actually shown where as Google Chrome developer tools is showing the actual image size.
so we can say neither Google Chrome nor Mozilla Firefox is wrong, they are just showing different image size because their designers have chosen to do so.
The downloaded image can be larger than what is displayed in your screen. If a downloaded image is too large for the view space, it shrinks the image to fit.
With Chrome 90, when hovering over an image URL in the Dev Tools Elements inspector, a tool tip will show Rendered size and Intrinsic size. Intrinsic size is the downloaded size.
In Firefox hovering over an image URL in it's Inspector will show the actual image size (downloaded size) under a popup thumbnail of the image, and it will show the rendered size over the image in the page view.
On real mobile devices the rendered size is actually likely to be larger than these browser mobile views indicate. As of writing mobile screen dimensions are commonly 1080 x 1920 pixels or even denser (The Google Pixel 5 has a FHD+ screen (1080 x 2340)). The browser mobile view is likely to indicate the view size is something like 320 x 480 (depending on which device is selected).
On my GNU/Linux box running KDE, I've set the DPI value of X11 by using the command
xrandr --fbmm 332x207
to 129x129 (as reported by xdpyinfo). Google Chrome 46, contrary to Firefox 42, unpleasantly scales up font sizes given in px with e.g.
<p style="font-size: 9px;">...</p>
I can understand the reasons for doing that – far too much badly designed web pages use font sizes in px where they actually should use em or percentages to be ready for today's multitude of different browsers and screen resolutions. However, I absolutely need correct px values for generating a font waterfall to test a font's rendering at different sizes.
What can I do to fix this?
To answer my own question: the solution is to use Chrome's --force-device-scale-factor option.
google-chrome-stable --force-device-scale-factor=1
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.
I'm trying to use Chrome's Dev Tools to emulate a standard rendering of a webpage on numerous mobile devices. However, when attempting to emulate devices with smaller screen resolutions than the width of the page I'm trying to render, I'm only seeing what would effectively happen if I just reduced the size of my desktop browser's window by dragging its edges.
I understand that that's useful but the experience I'm looking to test is how the page will look when the mobile device displays a zoomed out view of the site to fit the screen (this is typically what you see on mobile devices when a webpage isn't configured with viewport meta tags and/or CSS media queries).
Is there any way to achieve emulation of this default zooming behavior with Chrome's Dev Tools?
If you mean with non 'responsive sites with no viewport' to be rescaled to the default viewport of the device to get an idea of what the rescaling looks like, you can more or less reproduce it visually, yes.
Click on 'Screen' to do a custom emulation. And manually enter your target pixel display width and height sizes as 'Resolution'. Say 320 x 480 for an iPhone target.
Then enter a 'Device pixel ratio' that is: 1 / your-fixed-width * device-width
e.g. 0.3125 % for a fixed-width-design of 1024px to a 320px iPhone resolution target width.
It will fit your fixed-layout in a contained viewport accordingly, which you can manually rescale arbitrarily by changing your browser window size, or by moving the Chrome inspector bar up and down.
Fonts won't be as crisp and clear as a real device but that should give you an accurate visual layout.
To emulate a viewport larger than your current one, Inspect the page (in a Chromium browser, right-click on a page element and select Inspect or use Ctrl+Shift+C shortcut on Windows or Command+Shift+C on Mac), then select the Viewports (Command+Shift+M on Mac) or click the icon as highlighted below. Choose Desktop from the dropdown at top of image and select 50% or other zoom. You can then resize the nested viewport using the highlighted draggable edges.
I am using ExecWB() to zoom in/out my WebBrowser control like this:
m_lpBrowser->ExecWB(OLECMDID_OPTICAL_ZOOM, OLECMDEXECOPT_DONTPROMPTUSER, &(CComVariant)zoomFactor, NULL);
This works just fine when my OS dpi is 100% (96 dpi). However, under OS dpi 150% (144 dpi), setting zoom factor as 100 makes the web page in the browser look much smaller.(I was expecting to get exactly the same layout as the one under OS dpi 100%)
Then I found an old IE8 document.
In this document, OLECMDID_OPTICAL_ZOOM is said to be setting the ZOOM FACTOR of the browser
( ZOOM FACTOR = System DPI / Layout DPI)
But I just can't figure out the meaning of Layout DPI. Is this the root cause that I get smaller web pages?
This MSDN document mentioned there is a flag DOCHOSTUIFLAG_DPI_AWARE controlling the High DPI behaviour of the web control.
When the flag is set during initialization, the web control uses IE8 High DPI behavior; otherwise, it uses IE7 High DPI behaviour by default.
Under IE8 High DPI behaviour, the parameter zoom factor means exactly the scaling percentage of the web page, just like what you see in the IE zoom UI.
However, under IE7 High DPI behaviour, it's a little bit more complicated. Based on my experiment result,
the actual scaling factor = zoom factor / system dpi(%)
For example, under system 120dpi(125%), setting zoom factor 125 result in 1.0x scaling of web pages.
However, there is still something I can't explain: under system 120dpi(125%), I was expecting to get 80% scaling of web pages when I set zoom factor of 100. It turns out that words are 80% of their original size, but the pictures still 100%. Perhaps it is a bug in IE7 zooming.