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>
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.
I got my logo which is an SVG file for my react project which is saved in my images folder , i wanted to use this SVG icon on my browser tab , am i able to use SVG files ? and how i can link to it , i tried doing the following in the head tag in the index.html file but didnt work .
<head>
<meta charset="utf-8" />
<link rel="icon" href="src\images\logo.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="src\images\logo.svg" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght#400;500;600;700&family=Mulish:wght#300;400;700&family=Playfair+Display:wght#700&display=swap"
rel="stylesheet"
/>
<title>Thousand Sunny Travel Agency</title>
</head>
Recently, I started playing with meta tags in react. After some research, I found that react-helmet-async is the best library to set meta tags for each page. however, I wanted to want set meta tags for few pages conditionally.
I setup metatags for two pages differently, take a look...
index.js
ReactDOM.render(
<React.StrictMode>
<HelmetProvider>
<App/>
</HelmetProvider>
</React.StrictMode>,
document.getElementById('root')
);
pageOne.jsx
componentDidMount(){
axios.get('/getTrack/',{params: {id: this.props.match.params.id}})
.then((res) => this.setState({trackData: res.data, isLoading: false}))
.catch((err) => console.log(err))
}
render() {
return (
this.state.isLoading?
<div className="page-loader">
<Helmet>
{/* Page sittings */}
<meta charset="utf-8" />
<meta name="theme-color" content="#000000" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
{/* Primary Meta Tags */}
<title>Loading...</title>
</Helmet>
</div>
:
<div className="main-page">
<Helmet>
{/* Page sittings */}
<meta charset="utf-8" />
<meta name="theme-color" content="#000000" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
{/* Primary Meta Tags */}
<title>{this.state.trackData.title}</title>
<meta name="title" content={this.state.trackData.title}/>
<meta name="description" content={this.state.trackData.desc}/>
{/* Open Graph / Facebook */}
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://example.com/"/>
<meta property="og:title" content={this.state.trackData.title}/>
<meta property="og:description" content={this.state.trackData.desc}/>
<meta property="og:image" content="/logo192.png"/>
{/* Twitter */}
<meta property="twitter:card" content="summary_large_image"/>
<meta property="twitter:url" content="https://example.com/"/>
<meta property="twitter:title" content={this.state.trackData.title}/>
<meta property="twitter:description" content={this.state.trackData.desc}/>
<meta property="twitter:image" content="/logo192.png"/>
</Helmet>
</div>
)
}
pageTwo.jsx
<Helmet>
{/* Primary Meta Tags */}
<title>XYZ</title>
<meta charset="utf-8" />
<meta name="title" content="xyz"/>
<meta name="theme-color" content="#000000" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="xyz"/>
{/* Open Graph / Facebook */}
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://example.com/"/>
<meta property="og:title" content="xyz"/>
<meta property="og:description" content="xyz"/>
<meta property="og:image" content="/logo192.png"/>
{/* Twitter */}
<meta property="twitter:card" content="summary_large_image"/>
<meta property="twitter:url" content="https://example.com/"/>
<meta property="twitter:title" content="xzy"/>
<meta property="twitter:description" content="xzy"/>
<meta property="twitter:image" content="/logo192.png"/>
</Helmet>
"react": "^17.0.1"
"react-helmet-async": "^1.0.9",
I'm using django for backend
It is working in development mode but not in production mode. my web app doesn't have any metatags, I don't understand, how react-helmet-async is working?
Is this kind of metatags are shareable?
what is the alternative solution for such kind of work?
I'm working a website in Laravel and AngularJS. I wrote below meta tags in my site. I need to get dynamic values in AngularJS. Please help me.
<meta property="og:type" content="article" />
<meta property="og:title" content="TITLE OF YOUR POST OR PAGE" />
<meta property="og:description" content="DESCRIPTION OF PAGE CONTENT" />
<meta property="og:image" content="LINK TO THE IMAGE FILE" />
<meta property="og:url" content="PERMALINK" />
<meta property="og:site_name" content="SITE NAME" />
Use like
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="{{metaInformation.title}}">
<meta name="twitter:description" content="{{metaInformation.description}}">
<meta name="twitter:image" content="{{metaInformation.image}}">
<meta name="twitter:site" content="{{metaInformation.site}}">
<meta name="twitter:creator" content="{{metaInformation.creater}}" />
<meta name="twitter:url" content="{{metaInformation.url}}" />
and you can load metaInformation object from your basecontroller and change when ever you want.
But for a single page web application, you need to use some another tool like prerender (https://prerender.io/) to SEO
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" />';