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">
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">
I have a responsive web, but I want to allow the user to zoom out on this screen:
http://regalauncuento.es/comprar-cuento-infantil?aid=186
Please, open this link in your mobile device, you can check that zoom in works fine, but the zoom out is disabled...
I use this meta viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
I try this too, but zoom out continues fail:
<meta name="viewport" content="user-scalable=1, initial-scale=1.0"/>
What is happening here?, thanks you.
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.