Please see my demo video: https://youtu.be/8BQ_UgMGK2E
I'm convinced that rem is great for components, and em for sub-components, but seemingly my height:5rem is corresponding to something other than root font-size:16px
I cannot figure out why device / mobile emulation seems to scale the root font-size, as rem should be consistent at 16px, regardless of how many pixels are on the screen
Meta tag just says charset utf 8
window.devicePixelRatio is a consistent 2
As I mentioned in the comments above, you can resolve this by adding a viewport meta tag to the head element of your document.
For instance:
<meta name="viewport" content="width=device-width, initial-scale=1">
In doing so, this allows you to control the width and scaling of the browser's viewport. If this tag has a content value of width=device-width, the screen's width will match the device independent pixels and will ensure that all the different devices should scale and behave consistently.
For more specific information, here is a related question that I answered. The answer goes into more detail regarding the difference between max-width and max-device-width.
The answer, as mentioned by Josh Crozier is to add
<meta name="viewport" content="width=device-width, initial-scale=1">
in the index.html <head> section
Related
Reference image
I am building a dummy website with shapes, but there are some issues with screen sizing.
You can see in the above image that there are some sizing issues with the website when using Chrome DevTools to view how the website would look in different screen sizes.
Source code
I am using the latest version of Tailwind and Next.js, but I still get this annoying whitespace.
Any ideas on how to fix it?
Add the initial-scale and device width properties with your <Head> element to fix the issue - without the initial-scale, the browser does not do its bit to fill in contents to available viewport width's.
pages/index.js
<meta content="width=device-width, initial-scale=1" name="viewport" />
A Detailed explanation of how device width and initial scale work and what viewports actually do with different devices can be reviewed here at MDN
So I have my website here: http://easenhall.org.uk/index.html
If you were to reduce the width of the browser window it changes from desktop view to tablet view, then if you keep going it will change to mobile view.
It works on desktop browsers but if you were to look at the website through a mobile it will always display the web page in tablet mode. I cant figure out why.
If you inspect the desktop webpage and press the toggle device toolbar button and try to resize the page to a mobile view, you get a similar effect, it stays in tablet view.
I have checked the console and there are no errors displayed there, I cant find anything wrong with it. Any help would be appreciated.
Try to add this to your <header>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
You have to use this meta tag after the title tag, otherwise responsive does not work
<title>This is title</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
By way of background, when Apple introduced the iPhone some time back, they anticipated the problem that nobody at the time was writing pages designed for the small screen. This included the relatively new Media Queries, which was at the time still not widely supported.
They made the decision to scale the whole screen from a larger version to the small screen. It wasn’t easy to read, but at least you could see see where everything was, and you could always zoom into the interesting part.
The scaling was achieved by creating a viewport, an off-screen virtual screen, set to a width of 960px. The page would be rendered there, and scaled to the smaller physical screen.
It also meant that CSS media queries would get a reported width of 960px, and thus would not trigger alternative styles.
Apple also introduced a non-standard meta property called viewport, which gave the developer some control over the properties of the viewport.
The most common use of the viewport property is set the viewport size to the same as the physical screen. The viewort would then report a screen size which is more correct, and CSS Media Queries can do the rest. Effectively, the viewport is commonly used to undo the scaling effect.
Desktop browsers never had this issue to begin with, so the viewport is really just the browser window. That is why the desktop always tests as expected, because what you see is really what you get.
This is what vuejs (and probably other frameworks) is doing "under the hood":
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Setting exactly this tag in the header will lead to your desired result.
Hello friends to see if someone gives me a hand to tailor my web devices.
I tried to media queries and my phone (I have only one, Motorola Moto G) I managed to adapt, but I have not used the viewport tag. I just have been adapting the CSS through this media query:
Landscape:
#media screen and (max-width: 1000px) and (min-aspect-ratio: 13/9) {
}
Portrait:
#media screen and (max-width: 1000px) and (max-aspect-ratio: 13/9) {
}
On my phone the web is perfect, I managed to adapt both landscape and portrait. But what happens is that I have only this phone and do not know how the page will look in other devices, putting the viewport tag is deformed giant and completely:
<meta name="viewport" content="width=device-width, initial-scale=1">
The problem is that I'm pretty lost with this, because to prove my page this also deformed giant appears:
http://www.responsinator.com/
The question is, resolution is 1280x720 Moto G? Why to place the viewport tag goes so distorted? I do not understand, see if someone can explain. I tried to find information on the Internet but I can not understand it.
Thanks
What I think you're asking is that:
Is the Viewport Tag (the meta tag) absolutely essential because it is messing up your view of your website on your device.
To answer this, lets look at the viewport tag itself:
<meta name="viewport" content="width=device-width, initial-scale=1">
This tells the browser to set the initial scale to 100% of the viewport window, and the width of the body element to that of the device, so it is telling the browser to correlate the width of the webpage body element to the same width as that of the device viewing it.
In short, no the viewport tag is not absolutely essential, but it is an extremely good idea, although you can change the settings on the content part of the tag such as
<meta name="viewport" content="width=500, initial-scale=1">
or
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
You can do no wrong reading up on the Mozilla Developer Network page on the topic which will tell you the possible values you can set in the viewport tag. These are entirely seperate from the CSS display values and are used as a default for how the browser renders the page.
I can not give you more specific advice without you providing a more specific issue in your question
I have tried both min-width , max-width and min-device-width , max-device-width ,but none of them worked on smartphone(tested on iPhone) as expected.Smartphone view remain same when either one is used.I just get the same view as laptop(My laptop 1224px) on my phone but with smaller size.Images would clarify my point.
This is what I get on laptop(browser maximized),when min-width(1224px) is used
View 1
When I use min-width(320px) and max-width(480px) and shrink the browser on laptop,I get this
View 2
which is my expected result on smartphone.But I don't get this view on smartphone,even after using min-device-width(320px) and max-device-width(480px).Both width and device-width gives me view 1 with smaller view on iPhone(smaller images and tiny font)
How to get rid of this problem.
Your help would be greatly appreciated.
Because you said you do not have a viewport meta tag in your head, you will not have consistent scaling in mobile devices. In the <head> of your html, add the following:
<meta name="viewport" content="width=device-width, initial-scale=1">
Source: Using the viewport meta tag to control layout on mobile browsers
My mobile device is HTC One X, resolution: 720x1280
I need to do responsive web-page
in html i write <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
But in browser i have 360px width. I have checked it using $(window).width() or document.width
It renders at 360px wide, but the depth is 720px. In other words, it uses 4 pixels to display 1 normal pixel. So all normal graphics will appear blurry as it's upscaling the image twice the size. So the solution would be to create twice as big images, and scale them down 50%.
To the best of my knowledge, the syntax when declaring the viewpoint should be:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
Note that it uses commas instead of semi-colons, and there isn't any anything directly before the closing />.
From what I've read, using semi-colons may cause issues with certain browsers.
Good luck!
That may be your compressed resolution, not your scaled resolution.
If you look at the specs for your smartphone, you will see that a 4.7inch screen has 1280px by 720px resolution. See specs. That is approximately the same resolution as my 13" Macbook, which is impossible since my Macbook is over twice as wide. Hence, they are marketing the compressed resolution, which is not the resolution that browsers consider in handling media queries.