I'm using the Materialize CSS framework for a RoR application. The webpages scale as expected when using Chrome/Firefox dev tools, even when selecting a mobile device (I've used iPhone SE here, but bigger screen sizes yield the same result):
However upon visiting the site on my actual phone or any other smartphone device, it scales like this:
Does anyone know what the issue may be? I'm using the framework as-is, v0.100.2
Did you remember to add:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
?
Related
Perhaps a bit foolishly, I have chosen to do my portfolio site with two technologies that I have never worked with before - Tailwind and NextJS.
while developing the portfolio, I have opened it via my mobile browser and was surprised to see that the components are rendering on half screen only. This does not happen when I refit the device width manually in the browser on the desktop.
In index.js I have the following meta tag, which I thought could fix the issue
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Would anyone have idea why that happens?
My code is deployed to github
Many thanks,
Zan
Your parent images have a fixed width, try to remove it, or add max-width.
After developing a responsive webpage for practice using Pycharm and Firefox web dev tools, I uploaded it on Github. It appears to work just fine in the browser on my laptop, but when I attempt to use it on my Galaxy S9, it has the exact same font sizes as it would if I was using a laptop. It simply doesn't look like it should.
Screenshot on laptop:
laptop image
Screenshot on my phone:
smartphone image
What am I doing wrong? Here is the code if you want to see it.
Your HTML document is missing the viewport meta tag. Try adding <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> to the index.html file. After this has been added, the viewport in Firefox on your smartphone should conform to your mobile styles.
I made my site responsive using media queries and tested it by resizing my browser and it works fine. I also used a website to see how my page would render on apple devices, specifically iPhones, and the RWD worked. But when I looked at my site on an actual iPhones, or any other smartphone for that matter, it shows the page in "desktop mode"(i.e. not rendered with the media queries). Can someone please explain to me why this is? Sorry I don't have an example but I figured it's a common problem/fix. Thanks guys.
The first thing that comes to mind, as I've done it before, is did you forget your viewport tag?
<meta name="viewport" content="width=device-width, initial-scale=1">
I've built a site using media queries to make it responsive and whilst I've been developing it I have changed the width of the browser to test the page and the media queries seem to work fine with the break points I have set.
Problem is though, when testing the actual page on the iPhone, it doesn't seem to be recognizing the media queries at all and the full desktop view is shown in the browser instead.
Why ideas why an iPhone would do this, any mobile phone for that matter?
Here's the Litmus browser test result I have: https://litmus.com/pub/b78644d
Could take it a step further with
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I'd also recommend wiping out some of those !important(s), at least off of the widths you've set, so the responsiveness plays nicely.
Annnnnd Chrome has a sweet (relatively new) emulation tool built in that you can mess around with and use it to view your site scaled down to mobile as well - it's tucked in next to the Javascript Console.
Solved the problem adding this line to the head in the HTML:-
<meta name="viewport" content="width=device-width">
I'm developing a relatively simple website using a media query to target mobile devices (640px width and under) and when I view it on my archaic iPhone 3g it looks fine apart from the fact that there seems to be something that makes it primarily appear very "zoomed out"
It's probably easier to show you an example;
http://deanelliott.me/misc/berman/interior.php
I've only tested it on my iPhone so I'm not sure how it displays on other phones.
Any help would be most appreciated.
It appears your viewport settings are missing.
This is what I use:
<meta name="viewport"
content="width=device-width, initial-scale=1, target-densitydpi=device-dpi" />