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">
Related
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 using Vue-material on my VueJS 2 site and it looks as expected on my laptop. It responds accordingly as I shrink the screen. However, when I emulate a smartphone or open the site on my smartphone it simply looks like a "shrunken" version of the computer layout.
I may be missing something basic here, but I'm not sure what it is.
Site in shrunken down browser window 👍:
Site on smartphone 👎:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
add these two lines in your site's Html because it is missing meta viewport tag.
I hope it would help you.
add this meta to your index.html
<meta name="viewport" content="width=device-width,initial-scale=1.0">
Example index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>win-vue</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
Based on superluminary response here I've set up an Angular 1 app without Hashbangs and html5Mode(true) and rely on Google to execute javascript. The page is being indexed by Google but dynamic titles and description tags are not.
My index.html head is the following:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="/">
<meta name="author" content="me">
<meta name="robots" content="index,follow">
<title ng-bind="meta.title">Temp Title</title>
<meta name="description" content="{{meta.description}}">
<!-- Scripts & CSS -->
</head>
The title and description are correctly loaded but they don't display on Google.
How can I do that?
Also does this technique works with Facebook and other social networks? Thank you.
Why you don't use something like that?
https://github.com/steeve/angular-seo
Actually superluminary response here has the solution. HTML page head must be sent fully resolved by the server.
So in order for this solution to work I was forced to replicate angular routes in the server side and send the info resolved.
Instead of using a plain html view I changed to .ejs and also changed the header to something like this:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="/">
<meta name="robots" content="index,follow">
<script type="text/javascript">
window.title = <%- JSON.stringify(precomposition) %>.title;
</script>
<title ng-bind="title"><%= precomposition.title %></title>
<meta name="description" content="<%= precomposition.description %>">
<!-- More meta information -->
<!-- Scripts & CSS -->
</head>
Now when the website gets a direct hit (initially resolved by the server instead of Angular, always the case for crawlers) I handle the request server side:
//Express route
app.route('/').get(precomposition.render);
//precomposition
exports.render = function (req, res) {
const precomposition = {title: 'tile', description: 'description'};
res.locals.precomposition = precomposition;
res.render('index.ejs');
};
If it's not a direct hit Angular handles the title update (because the other info is not displayed to the user).
It has off course some downsides but Google since October 2015 recommends this approach instead of "_escaped_fragment_ URLs". Also I think it's a lot less resource consuming than the selfhosted pre-render alternatives and cheaper than the paid ones.
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" />';