When I load Kickstarter.com on my iPhone, it loads like this
But when I load the site I created, it loads like this
As you can see, for KickStarter, it zoomed all the way out upon load.
For my site, it doesn't zoom all the way out. It is zoomed in to the top left hand corner of my site.
Does anyone know why this is happening? How do I make my site to have same behavior as seen on KickStarter?
thanks
Have you set the proper scaling tags in your HTML file?
You need to have this at the top of your HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Assuming this isn't a responsive design, you need to add viewport meta tags to your page
<meta name="viewport" content="width=1024">
change 1024 to whatever your page width is optimized for
Try adding:
<meta name="viewport" content="width=device-width, initial-scale=1">
in your header of the site. The "device-width" will fit the screen to the devices width.
Related
In a webpage I use the following markup to solve the initial zoom in mobile browsers:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
But the issue still exists.
Does anyone know how to solve the initial zoom issue in mobile browsers?
Correct me if I am wrong but wouldn't the initial scale just set it so it defaults to normal? It won't stop zooming in.
There is no code to go by so I will take a shot in the dark and guess that there is an element on the page that it's focusing on? ie an input box. This will in fact cause a zoom to happen on page load. Does this happen on all pages?
If you could provide some code example and also a bit of a better explanation I think someone should be able to help you easier.
What is initial scale, user-scalable, minimum-scale, maximum-scale attribute in meta tag?
Thanks
Try the below code to fix the issue:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I am using Foundation for a responsive website and have a problem with SOME mobile devices not properly scaling the viewport ONLY when you load another page via our ng-include. This loads new content into the page and the width of the page then breaks and requires horizontal scrolling.
This doesn't happen in certain devices such as Galaxy Note 3/4, but does happen in devices with identical resolutions, such as iPhone 6 Plus. I do have a viewport attribute and scaling set:
<meta name="viewport" content="width=device-width, initial-scale=1, target-densityDpi=device-dpi;">
Any help figuring out why this doesn't scale properly when I load new dynamic content for this single page application is greatly appreciated. I'm not sure if it's related (just thought of it), but we also use document equalizer reflow often:
$(document).foundation('equalizer','reflow');
I needed to add a min and max scale. Although I didn't test it, I imagine I just needed to add a max scale, as the content was flowing off the screen.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
I am working on phonegap/cordova app. Created few pages in html5, but i can't get them to be across whole screen regardless of the size of the screen. I tried with javascript. Added this script to be activated on load:
function SetupPage(){
document.getElementsById("container").style.width=window.innerWidth;
document.getElementsById("container").style.height=window.innerHeight;
}
But it still has the size of content within it, and i need it to stretch everything depending on the screen size. How can this be done?
set your meta viewport scale
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
You should be able to use CSS after that to size how you need.
My website has responsive design, I am loading a page in mobile browser in which many images are displayed one below another. It looks fine, when orientation is changed then everything is resized and displayed properly but different content is shown than what was shown before changing orientation
For example, if there are 5 images displaying one below another in mobile browser and currently 2nd image is displaying and then after changing orientation it shows 3rd image instead of 2nd
I am currently using this::
<meta name="viewport" content="width=device-width, initial-scale=1" />
Plese help
For flexible layouts it’s more practical to base your viewport width on the device in question without setting the zooming parameter. Try the following instead:
<meta name="viewport" content="width=device-width">
I added view port meta attribute as follows:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
Usually, it works well, but the problem occurs when I use margin-left and thus move the absolute main view to the right, outside of the device view. In this case, when double-tapped, the view becomes zoomed out to contain the whole contents (including the part that is moved outside of the device view).
I don't understand why the view port meta attribute doesn't apply to this case.
Can someone answer this?
I had a similar issue with a site I was developing. I solved the issue using overflow:hidden on the body for small screen sizes. You may also want to try to use padding instead of margin and mark those elements box-sizing:border-box. Give it a shot and also post your code so I can get a better idea!
All the best,
Shalom