I'm new to the world of web design and I've started with HTML and CSS. I've begun by building my own website from scratch and I'm currently stumped with how the design scales across different platforms.
When viewing my website on an iPhone 7, which is listed online as having a resolution of 750 x 1334, my inline-block images are able to sit next to one another in rows of 2. I don't understand how this is possible when they are set to have a height and width of 400px. I've attached a developer screenshot from chrome dev tools to show further. Developer tools showing the issue
Do I have a misunderstanding of how iPhones display content? If the maximum width resolution is 750px (and only 375px according to chrome dev tool...) how is it able to display 2 400px images side by side?
iPhones have "Retina display" which have a higher screen resolution than the "logical" resolution that you see in dev tools.
The image (content of the whole screen) is first rasterized, after that downsampled to the screen resolution and then displayed on the physical screen.
For the iPhone 7 model (and 6 and 8) scale factor is 2.
These models have screen resolution of 750x1334 and logical resolution of 375x667.
You can find resolutions for other models here and more details here.
As for the 2 images with width of 400px displaying on the 375px with screen side by side seems like a viewport zoom "issue".
The of the html is not visible on the screenshot, but the "jumbotron" class on the suggests that you used bootstrap. Perhaps you have unintentionally set the viewport when you where setting up bootstrap.
Related
Screen Size unchanged on Mobile
Briefly explaining this, I have a Chat App that works well on a desktop view but when we go into mobile it seems that the device simply mimics the size of the desktop screen (ie: on my Oneplus 6 the <html> tag is around 4000x2000px). I'm quite new to HTML mobile scaling so forgive me if the wording for this isn't to par with what's expected.
Continuing, on my desktop if I manually change Chrome's window size my webpage scales perfectly while on my mobile device it's huge as said in the previous line. Would using the #media tag in css help specifically for this? If so, how?
One last thing, if I zoom in manually on my mobile it obviously looks perfect as it's meant to fit the new tall aspect ratios. Which is ultimately what I wish to do, just need to keep the website scaled perfectly like on the second picture (picture B).Image B
I am currently working on a template for a webpage and I'm currently working on the responsiveness for it. I have the desktop version and the mobile phone versions working just fine. The problem that I'm having with it right now is I'm trying to make a version for tablets. The "tablet" I'm using right now is a surface pro which has a 96 dpi. My desktop has and older 1080 monitor. So when I open chrome up with dev tools on the surface the pixel width is the same or close to my desktop but is looking completely different. Text that is on a single line on the desktop is on two lines for the surface and not all is showing. The reason this is an issue is that this is the header of the page. At full width on the surface it's acting more like half width on the desktop. I thought it might be because the screen for the surface is higher DPI on the surface but not sure. Is this what is causing this and if so how do you fix it. Setting a media query of say 800px for tablet works for say desktop and some tablets but doesn't seem to be working for something like a surface. So is there a different way to set up width? I have code of the site but I don't think any of it would be helpful. If needed let me know.
Try using vh(viewport height) for height and vw(viewport width) for width, it uses percentage of the window. 100vh would use 100% of the window height and 100vw would use 100% of the window width. It's better than using pixels and requires less work to make the page responsive, pixels are inconsistent and break easily.
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).
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.
Why does iOS scale images up? I am building a site and want it to be mobile friendly, when I look at it on iOS my pixel-based images are getting scaled up for some reason.
Shouldn't the browser keep the images the right size? I have been testing it mostly in chrome using Dev Tools and setting it up to emulate iphone 4 and the images don't scale at all, it displays them as they are supposed to be.
I took a couple screen shots and the iphone width its taking is 640px, but my media query is as follows:
#media screen and (max-device-width: 479px)
What am I doing wrong? I can't find a solution to this. I need the pixel font images to stay pixely. Same for my splash screen. Screen shots available if you need....
You probably haven't been seeing the issue because your emulator isn't retina display, and therefore your images aren't being scaled, but your device is probably an iPhone 4 or later, and therefore has retina display, which assumes it needs to scale images unless directed otherwise.
Regarding devices with retina display, image resolution works in the browser similarly as it does on the device. If you want crisp images, you need to specify a separate image for the retina display. This stack overflow post has a few suggestions for implementing it: Apple retina support for images in HTML