In my index file I have the following:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I am using React to load the page, but the main index file is an HTML file. (.pug)
This is inserted correctly into the DOM. However, the viewport is ignored - my page is showing the desktop version.
If I edit the DOM in the Chrome dev tools, eg. change 1 to 1.0 or any other part of the meta tag, it causes the page to re-calculate the viewport correctly, and will then display correctly straight away. Any ideas?
You might need to click the image to see the GIF animation.
Try using meta(name='viewport', content='width=device-width, initial-scale=1.0') in your index.pug file.
Based on your code, try using meta(name='viewport', content='width=device-width, initial-scale=1.0, maximum-scale=1.0')
Try using this. It works for me.
<meta name="viewport" content="width=device-width" initial-scale="1.00" maximum-scale="1.0" />
Well, you could try triggering the viewport recalculation manually on page load with, for example:
window.getComputedStyle(document.body)
Please, note that this is not the best solution. It should just be used while (or only if) the root cause issue is not found.
Related
I have a problem that I'm almost sure is because of how I'm building my pages and not just a CSS issue. I am using Tailwind for my website. For my Sveltekit blog, I wanted the xyz.com/projects/some-project URL structure so I created a folder in routes called projects. Inside that I have two files, index.svelte and [project].svelte. Index should contain the listing of all posts and any project should be created at [project]. All this works fine, but the pages that are dynamically created have some weird layout issue that is causing it to not be responsive. For example, you can see how weirdly this page is formatted.
You can visit this page and see it for yourself. My code for this is here.
I read somewhere that I am supposed to use __layout.reset.svelte or something of that sort while creating dynamic routes? Is that what is wrong?
Why are my breakpoints and responsive CSS not working?
The reason I think its a Sveltekit issue is because the dynamic pages are the only pages where this is happening, so I'm assuming there is something wrong in how I've set it up.
Your /src/app.html's <head> section is where the problem is located. Yours is:
<head>
%svelte.head%
</head>
which is missing a critical piece, the <meta name="viewport" content="width=device-width, initial-scale=1" /> tag which is essential for mobile responsiveness.
This is normally present in default SvelteKit projects:
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%svelte.head%
</head>
I noticed you started your project from a custom template, and indeed that template's /scr/app.html skeleton is missing the above info.
This is something you have to watch out for when using such templates - how they deviate from a standard install and what the impact is for you. My advice is, start from the default, and add pieces knowingly, with full understanding of the incremental changes and full control of your source.
I am building a webapp with django, react, and material-ui. I am facing the same issue with firefox and chrome. On my localhost, the css looks fine. But when I load it to the webserver, a few things are wrong:
Material UI field labels are smushed down in production.
h3 element is bigger in production
Material UI button is not full width in production
I have read about adjusting the zoom levels on the browser directly, but since it is only effecting a few elements (the main containers on the screen are fine) I don't think this is the problem.
Another question suggested to ensure the meta tags are the same, which they're not exactly, but they're not different in a way that is obvious to me it would cause this.
The following is the meta tags for both production and development.
production meta (based off of chrome dev tools)
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
development meta (based off chrome dev tools)
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<meta name="theme-color" content="#000000">
<meta name="description" content="Web site created using create-react-app">
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width">
<link rel="manifest" href="/manifest.json"> (not in production)
The only difference I see is the viewport in development has minimum-scale=1. When I add that directly to my production code from the dev tools, the problem persists. The link to manifest is also not in production, but I am assuming react build accounts for this file.
Any ideas, I really don't want to maintain two code sources at this granular of a level. Thank you.
SOLVED:
In my django application I am importing bootstrap 5 at the top level html file, which I am embedding my React/ CSS scripts in. Bootstrap is interfering with my React css which is based on Material-UI.
There might be a better solution, but I just maintain 2 base.html files in my django application, one with bootstrap that handles my django related files, and one for my embedded react project.
In my HTML I am using following meta tag
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,maximum-scale=1">
Notice that height is set to device-height.
After deploying the HTML on android device using ionic framework, height=device-height is gone from the meta tag and tag simply becomes like this.(I am using chrome's inspect device tool to check it).
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
What am I missing here? why height property from the meta tag is being removed and how do I prevent it from being removed?
I'm trying to get my website to be displayed at full scale in any mobile device, like in this example:
As of now, the website opens automatically zoomed-in, and my clients don't like that. I thought adding the line
<meta name="viewport" content="width=device-width, initial-scale=1">
would solve this, but it does nothing. I've tried playing with the initial-scale value to see if it worked and it does nothing. I've set it to initial-scale=0.5, for example, and it didn't change the way the page displayed (to clarify, it doesn't work neither on desktop browser nor on mobile devices).
I've been working on this for days, any help would be greatly appreciated!
EDIT: To clarify, this is a mockup of what I get vs. what I need.
Try to add the meta tags below:
<meta name="viewport" content="user-scalable=yes">
<meta name="apple-mobile-web-app-capable" content="yes"/>
and see it your request will be resolved.
I am currently working on a Html 5 WebApp. The entire app works perfectly fine, with the exception of scalability (Zooming). I have placed the following Meta tag on my WebApp's page,
<meta name="viewport" content="user-scalable=yes; width=device-width; height=device-height; initial-scale=1.0;" />
After much research I have come to the conclusion that these Meta tags are primarily for the iPhone version of safari. However, the problem that I am experiencing is, while an iPhone user is on my site, previous to bookmarking the WebApp to the home screen, the user is not able to zoom in or out (using the pinching motion). The only way that that seems to create a zooming in effect, is if the user changes the orientation of their phone.
I have tested this meta tag with both an Apple device, and an Android device. The Android device disabled zooming when user-scalable = no, and allowed zooming when user-scalable=yes, while the Apple device never allowed zooming in either of the two testing cases.
My Questions Are:
Are these Meta Tags primarily designed for iPhone Safari browsers?
Am I correctly using the above Meta Tag?
If I am not, What is the proper way to use the Meta Tag?
Thank you for your advice in advance!
I could be wrong, but I don't think you need the user-scalable line at all. Have you tried removing that and seeing what happens? Something like this is usually sufficient:
<meta name="viewport" content="width=device-width" />
… and then maybe tweak from there. If you do want to use all the attributes, try separating them with a comma rather than a semi-colon. For example:
<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1.0" />