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">
Related
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" />
My scenario is I have iphone 5S device and safari browser. In this browser I opened a site (this site is included in bootstrap responsive also) with include below meta tag code.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
If I opened the site with zoom in mode. everything is fine.
My problem is if open any other page of the same site it is showing zoom in view, but my requirement is if I open any page it will show normal view not in a zoom view. How can I do?
Shall I add any code in the meta tag? please suggest me
Use this
<meta id="id" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
$(document).ready(function(){
$("#id").attr("content", "width=device-width, initial-scale=1")
})
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'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.
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