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.
Related
im trying to change the title of my website in google search but i can't seem to find how to do it. I saw something about react-helmet i couldn't figure out how to use it in my files. Im trying to change the title and description of my website and also pages. I made website in react.js and i host it on apache2.
Change the title and description in the index.html file of our React App and then rebuild the app.
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<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**"
/>
<title>React App</title>
Hope this helps. Let me know if this works for you.
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>
I'm deploying a React App in Netlify. I've made few changes to make my custom icon and the name of my App appears in the browser's tab, but it just shows the name, not the icon.
These are the changes that I've made:
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="The Mini Blog" content="The Mini Blog" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/blog-pic.png" />
<title>The Mini Blog</title>
</head>```
To be more specific. The favicon.ico is the image that I want to use as icon in the tab. I did that change in the first <link> tag.
In the second <link> tag I added the same icon that is in favicon.ico but under the name "blog-pic.png"
And last, the title tag with the name of my app.
Noteworthy that when I run my app locally displays everything fine.
Thanks in advance.
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'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>