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>
Related
I am facing one issue which is when I upload my angular app to my hosting it's not opening sub URLs, for example, https://mywebsite.com it's opening but https://mywebsite.com/pricing it's not opening directly user need to open website first then go to another page.
Index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mobile App Development Services | Web Development Services | Logo Design Services</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="./assets/img/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
</head>
<body>
<app-root></app-root>
</body>
</html>
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<input type="text" ng-model='name'>{{name}}
</div>
<!-- Angular JS-->
<script src="../vendor/angular/angular.min.js"></script>
</body>
</html>
i'm trying out angular for the first time, and i encounter this error
Where is your AngularJS code? It needs the app name declaring in the modules otherwise it will error as its referencing something that doesnt exist.
var app = angular.module('myApp', []);
i've fixed it.. i had to referenced the angular.min.js file at the top of the page
I'm trying to create a component (here named "meta-info") which renders a meta-tag with dynamic information (which is being fetched via Rest-Webservice) into the head-tag.
Problem is: In the processed html the component won't stay in the head but gets rendered into the body as the first element, and every script and style tag in the head which follows the component in the code also gets moved into the body. It's like the component automatically opens a body-tag. :-(
Anyone got a tip of how to achieve what I need?
<!DOCTYPE html>
<html lang="de" class="app-basic-an" ng-app="app">
<head>
<meta charset="utf-8">
<title ng-bind="$ctrl.title"></title>
<meta http-equiv="cache-control" content="no-cache, no-store">
<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta-info></meta-info>
[...]
</head>
<body>
[...]
</body>
</html>
An AngularJS not allow views to set the page title and insert extra elements into the head.
Try to use additional module angularjs-viewhead for it
https://github.com/apparentlymart/angularjs-viewhead
var app = angular.module('myApp', ['viewhead']);
<meta view-head name="description" content={{metaDescription}}>
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'm having issues launching a React.js app built with Gulp.
I ran npm install even npm update, but when I go to the browser, I do not see the app, but instead I see a blank screen.
Also, I noticed that gulp build produced a blank index.html file.
<!-- <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Default</title>
<meta name="description" content="">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link href="./app.css" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700" rel="stylesheet">
</head>
<body>
<div class="container">
<div id="registration-form"></div>
</div>
<script src="./app.js"></script>
</body>
</html> -->
Please advise.