meta name="viewport" not working as expected - html

I am creating a new site. In the head I have
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- for mobile phones -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
However, on mobile devices its large and you have to scroll horizontally. i was expecting it to scale and fit into the width of the device. I have used this before on other sites and it has worked fine.
What's wrong please

Related

VS Code - Why doesn't "!+tab" create an HTML template anymore

I used to be able to type "!+tab" at the beginning of a new HTML tab to create the basic layout of an HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sunshine Seasonal Solutions</title>
</head>
etc.....
What could I have changed in the settings for the snippet to not work anymore?
Tried different settings in VS Code

How to make text fill up entire page on mobile browser?

I have a very simple HTML page that shows bitcoin prices, on mobile it looks terrible because the text is really small and there is a lot of empty space on the right. How can I make this so it fills up the width of the page?
<html>
<head>
<title>HTML in 10 Simple Steps or Less</title>
<meta http-equiv="refresh" content="60" />
</head>
<body>
<script src="https://widgets.coingecko.com/coingecko-coin-list-widget.js"></script>
<coingecko-coin-list-widget coin-ids="ethereum,bitcoin,aave,convex-finance,dopex,dydx" currency="usd" locale="en" width="300""></coingecko-coin-list-widget>
</body>
</html>
https://imgur.com/a/dNG0EKM
The following header tags will prevent the device from scaling automatically and allow you to take control.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="HandheldFriendly" content="true">
Then, assuming its an iframe, apply this CSS:
iframe{width:100%}

adding meta og:image property to share custom facebook links using boostrap and flask

I have a website called www.caminemosjuntos.com.ar and I add the facebook share link button but the default preview image is not what I want to show. So I try to add <meta og:image property inside the head to customize it but when I debug the page I notice that browser is rendering inside the body tag.
I'm using python-flask with boostrap and templates.
This is how start my header.html:
'''
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<meta name="description" content="">
<meta name="author" content="">
<meta property="og:image" content="https://www.caminemosjuntos.com.ar/static/img/pathway.jpeg" />
'''
and browser is rendering from post section: (post.html include header.html)
'''
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<meta charset="utf-8"><meta name="description" content="">
<meta name="author" content="">
<meta property="og:image" content="https://www.caminemosjuntos.com.ar/static/img/pathway.jpeg">
<title>Caminemos juntos</title>
'''
How can I do to fix this? Facebook is still saying that I don't have explicitly the og:image.
Thanks
I am guessing that your image could be too big try reducing the size or try a smaller image. Try different sizes and resolutions.
See: https://developers.facebook.com/docs/sharing/best-practices#images

How to replace meta tags with something else

I have a big problem with meta tag. More precisely:
<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
I have a program that automatically "push" things on eBay (with template). I want responsive template (it is made on bootstrap), but I can not use these tags because this program (literally) cuts it. At this point, all my work on the template goes in vain. Can someone colud help me?

iOS6 displaying site too large when using initial-scale=1.0 and maximum-scale-1.0

When I remove initial and maximum-scale out from the meta tag:
<meta name="viewport" content="width=device-width, user-scalable=no" />
tag, iOS 6 Safari is diplaying the site too large. I have to take the initial and maximum out for it too fit correctly. Is it acceptable to leave the viewport tag like this? I haven't tested on other mobile devices.
I use the following for ensure proper sizing on all mobile devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
In some cases, I will adjust the initial-scale down a minor amount to ensure the proper scale:
<meta name="viewport" content="width=device-width, initial-scale=.96"> // Scale as needed