I assume this has to do with the retina display and thus everything is twice as small as it should be on the iPhone.
This is the site I'm working on: http://share-the-secret.com/
If you resize the site horizontally to two grid block, that's how it is supposed to look on the iPhone. Currently on the iPhone you see the four grid layout.
I do not want to use media queries to give a custom size for all the elements on the iPhone.
Is there an easier fix for this?
Thanks!
Found the solution!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Related
I have done many tries but I can't find a good solution. I'm using chart.js on my web application and it should work well both on mobile and desktop.
When I have added the meta tag <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> the graphs don't render well on the smartphone, both android and iOs.
The graphs are very tiny and so are useless.
How should I configure the canvas or the graph to show well in these device?
Here two examples on a Samsung S8.
Without meta tag viewport
With meta tag viewport
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 have installed a Magento 1.9 and found that it is a responsive layout whcih is really good. But I want to disable responsive feature.
Is there any way if I can disable the responsive feature in Magento 1.9.
I tried putting following values in meta tag but it didn't work. I just want website to display desktop layout on mobile devices.
<meta name="viewport" content="initial-scale=1, width=1280, maximum-scale=1" />
Try adding the css...
body {
min-width:1280px;
}
Bear in mind that width is larger than most non-widescreen monitors, however.
I'd probably then remove the maximum scale from your viewport as I think that would prevent someone zooming in, thus making your site unusable on a smart phone.
I'd then try just:
<meta name="viewport" content="width=1280" />
for the viewport.
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">