We are building a site, and when we run it on our local servers (Our private wifi 10.0.0.whatever) it worked fine.
Now we uploaded the site online, and when opening the sites on our mobile the scale is PC scale.
We already are using the tags:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
We do not understand whats the problem... The site is responsive.
Any thoughts?
The site is implmented in AngularJS and using bootstrap library.
An image for reference.... from W3schools.
This is the start of my head div:
<!doctype html>
<html lang="en" dir="rtl" ng-app="siteNameApp" style="padding-bottom: 80px;">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>siteName</title>
<script src="lib/angular/angular.min.js"></script>
Even though what #Ajay said was the right answer, in my case, the site view was wrong because Go-daddy domain warped our site with their own HTML Header.
Make sure the site header is your own and not someone else's.
As Ajay said, the meta div should be in the index header
<meta name="viewport" content="width=device-width">
Related
I have a website which must be responsive for mobile phones. I've created it using my desktop. When I adjust browser windows it's working perfectly for mobile phone but when I check it on my real mobile phone: Samsung Galaxy S2 it's not responsive to the mobile view.
What could be the wrong?
You are probably missing the viewport meta tag in the html head:
<meta name="viewport" content="width=device-width, initial-scale=1">
Without it the device assumes and sets the viewport to full size.
More info here.
I have also faced this problem. Finally I got a solution.
Use this bellow code. Hope: problem will be solve.
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
Though it is answered above and it is right to use
<meta name="viewport" content="width=device-width, initial-scale=1">
but if you are using React and webpack then don't forget to close the element tag
<meta name="viewport" content="width=device-width, initial-scale=1" />
Responsive meta tag
To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
So guys, recently I finished a website, I was doing it in a window, with the lowest width allowed by Chrome so it could have a nice display on cellphones, the thing is when I finally opened it in a cellphone it was displaying as a PC would display in the widest screen. For what I understand the project was already done to work in mobiles. What did went wrong in this project? How can I fix it?
Here is a picture to illustrate what I am talking about
For more details I have a link here for this project:
https://github.com/MestreALMO/MestreALMO.github.io
You declare this meta tag <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=0.8">.
You should try to split it in two differents meta tags :
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.8">
My website is builded with bootstrap v2 and i can't find a solution to the page resize on mobile device ! i used the representative bootstrap css but i got more problems !!
i used this meta to resize the page but the container still not resizing
<meta name="viewport" content="width=device-width">
Link : http://www.st3s-security.com/fr
Thanks.
Use these meta tags in your head tag
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
I am using bootstrap 3. In my document I have:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
When I use chrome dev tools and shrink the page or choose mobile view it works perfect. On my iphone 6 it is always desktop view.
I ran google mobile friendly test and it returned:
Text too small to read
Links too close together
Mobile viewport not set
Am I missing some other piece of code that is relevant?
I figured it out. I was forwarding with Masking to heroku, and google was not able to read my meta tags.
I've developed my site using Angular Material. The desktop version is perfect. However, when viewed on mobile the entire site looks broken and misplaced. I'm wondering if this is because I have not set the cols size for every element on my site? Any help on how to fix this on mobile would be appreciated. Below I attached my meta tags in case that might be the issue. The site is here along with the source code.
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="viewport" content="width=device-width">
I've determined that if you add the appropriate cols size attributes for a small screen this solved my problem. So use md-cols-sm="2" in the html tags that need to be sized on the mobile screen.