I want to use a meta tag to set device width on jsfiddle.net
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
but meta tags aren't allowed. Is it simply not possible? The mobile sync mode also doesn't auto enable it.
You can manipulate the DOM's head using jQuery or Javascript.
jQuery
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1" />');
Javascript
document.getElementByTagName('head').innerHTML += '<meta name="viewport" content="width=device-width, initial-scale=1" />';
Related
it works properly on my own device (s21) but not on ios devices.
Google chrome works broken even though I developed it according to iphone models in devtool.
index.html
<html lang="en" style="min-height: 100%; min-width: 100%">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, height=device-height">
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
I doubt if I need to add any css to html body or root.
hello im using NextJs <Head/> Tag from API , all meta tags work fine only the title meta doesn't show up correctly instead it shows the first H1 in page here's the code :
<Head>
<title>{prop.content.meta.title}</title>
<meta name="title" key="title" content={prop.content.meta.title} />
<meta name="description" content={prop.content.meta.desc}/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://metatags.io/"/>
<meta property="og:title" key="title" content={prop.content.meta.title}/>
<meta property="og:description" content={prop.content.meta.desc}/>
<meta property="og:image" content={prop.content.meta.image}/>
<meta property="twitter:card" content="summary_large_image"/>
<meta property="twitter:url" content="https://metatags.io/"/>
<meta property="twitter:title" key="title" content={prop.content.meta.title}/>
<meta property="twitter:description" content={prop.content.meta.desc}/>
<meta property="twitter:image" content={prop.content.meta.image}/>
</Head>
all meta tags work perfectly tho the title is showing up in the Tab title but when I test the meta tags I don't get the title comming from the API but I get the first h1 from page , here's image :
Note: I'm 100% sure that the title is coming from the API as it should be , and as I said it shows up correctly in {prop.content.meta.title} but not in Meta title
The issue was that I was testing the title with short words like 'Title1' and like that...
so when I used a kinda long sentence it worked, the issue was meta title tag has a minimum size to work
I want to show content with images. I have seen twitter tags are form now how I can share twitter. What link I need to give. Even its validated by twitter validator tool.
Here are the tags formed
<meta property="twitter:url" content="xyz.com/blog/blogpage">
<meta property="twitter:description" content="acbc">
<meta property="og:description" content="xyz">
<meta name="keywords" content="abcd">
<meta name="description" content="xzcczxcczxc">
<meta about="blog/blogpage" property="acx:num_replies"
content="0" datatype="xsd:integer">
<meta content="ABCD" about="/blog/blogpage" property="dc:title">
<meta property="og:image" content="xyz.com/sites/default/files/field/image/image.jpg">
<meta property="twitter:creator" content="#abc">
<meta property="og:title" content="zyz">
<meta property="twitter:image:height" content="500">
<meta property="twitter:image:width" content="500">
validate url that I need to share along with media using twitter card validator.
.
passed url to twiiter share link.
I'm working at a website(Revogue).I'm trying to disable zoom for mobile phones and it doesn't work.I tried many metaviewports...Please help me((
<meta name="viewport" content="user-scalable=0, initial-scale=1, maximum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<meta name="HandheldFriendly" content="true" />
This should be all you need to disable zoom:
<meta name="viewport" content="user-scalable=no" />
If your browser is still zooming make sure there's no "force zoom" accessibility settings enabled. In Chrome it's under "three dot menu"->settings->accessibility.
You must config in css file to works, something like this
<style>
#-ms-viewport{
user-zoom:fixed;
max-zoom:2;
min-zoom:2;
}
body, html{
margin:0;
overflow:hidden;
-ms-content-zooming:none;
-ms-overflow-style:none !important;
background-color: #ccc;
width:720px;
height:480px;
}
</style>
im having trouble getting my website to fill the entire screen on mobile devices.
My meta tag looks like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
and the css
body, html {
margin: 0;
width: 100% ;
}
http://www.girlsskateaustralia.com
anyone have any ideas??
Looks fine on mobile IE but some browsers might be picky about the initial scale value; this is what I use:
<meta name="viewport" content="width=device-width, initial-scale=1.0">