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.
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">
Using Bootstrap 4 skeleton, I have tried Bootstrap built in viewport meta tag which is
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
and also used one custom meta from web research like
<meta name="viewport" content="width=device-width, shrink-to-fit=no, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1">
to prevent changing the display of website on Pinch and Zoom in, but in both ceases the website is still Pinch-able and Zoom-able in Safari browser in mobile. Tested on Android the web site is not zoom-able but it is on Safari. What am I missing?
Update your view port with following will work. it work for me.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
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">
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 having some issues with my viewport on the mobile version of my web site. All of my elements display and are re-sized correctly within the page, however the page extends much farther then the end of the content.
Is there a way to restrict the height of my view port? Or could this possibly be a different issue I am just not seeing?
After further testing this error only occurs on Android mobile devices. Are there any know issues with Android viewports?
Remove height=device-height, from
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
this is i found in your code
if you height=device-height, will fit the site vertical on the screen
may be you required the
<meta name="viewport" content="width=device-width">
only