I have a mobile website which is design on 640px wide. So all content is a maximum of 640px wide.
In the header I have my meta tag:
<meta name="viewport" content="width=device-width">
On iPhone/iPad/iPodtouch the page is displayed correctly: the content fits exactly the width of the screen. But when I try it on Android (default browser or Dolphin HD) the screen is exactly half, so 320px wide. Very annoying because then you have to manually zoom out the see all the content.
How can I make sure that on load ALL content is always shown?
Try specifying the target-densityDpi:
<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi">
Related
I am beginning a landing page for a client. I have made it responsive, but when I open it up on a mobile phone, it pops up large and cuts off the page. I have to pinch the screen and zoom out in order to get the full content. How can I code it to where it is already just 100% there without having to zoom out?
Whether use CSS Media Queries or Boostrap framework which will provide you with predefined classes to add to your HTML elements in order for them to adapt on different screen sizes.
Double check that you haven't hard-coded widths for any images, divs or other elements on the page. Instead use relative sizes when you can, eg width: 50vw; . Setting max-widths is sometimes necessary as well, eg max-width:100%;
As per the earlier suggestion from Blueware, media queries will help you set styles based on the viewport or window size.
Also check that you have included a viewport meta tag in the head of your page:
<head>
....
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
If still no joy, post some code or a URL.
Good luck!
I'm working on a page here that I can't get to display sanely on a mobile phone. I'm reading it with a Samsung S7. The page looks like this on the desktop (without the width arrow and dimension):
and that's what I would like to see on the S7: a simple scaled down version of the original. The width is 1200px. I have the meta viewport tag below on the page:
<meta name="viewport" content="width=1200, initial-scale=3">
Sometimes this viewport tag works, giving me exactly what I want. But if I load it again, the page may load offset to the left so that the menu is off screen. Or it will load magnified. After it loaded incorrectly once, I kept tapping and swiping and it suddenly snapped to the correct layout above.
I've experimented with the viewport tag. The initial-scale value doesn't seem to have an affect, I've tried 1 and 3 it's worked with both and failed with both. The width seems to have to be 1200 or it will fail everytime.
Can anyone suggest why this is behaving so erratically?
Thanks
a simple scaled down version of the original.
For that, you should not use
<meta name="viewport" content="width=1200, initial-scale=3">
Use
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Because, if you set width=1200px, you may have to scroll it in mobile device.
But in width=device-width, it automatically fetch the available width of device and stretch accordingly.
You can read the official documentation here on MDN
There are some other attributes regarding to zooming.
They are minimum-scale , maximum-scale, user-scalable.
minimum-scale -> The minimum zoom level <int> value
maximum-scale -> The maximum zoom level <int> value
user-scalable -> Whether allow the user to zoom or not. yes or no
I'm trying to get a 1200px page to display in a Samsung S7. Since the S7 has a 1440x2560 screen I would expect the page to display fine, but all I see is about the left quarter of it, with no ability to swipe left to see more. I tried adding a viewport meta tag:
<head>
<meta name = "viewport" content="width=device-width, initial-scale=1.0" />
but I get the same results. Does anyone know how to get this page to display correctly?
The page I'm trying to display is at https://thebarcoderegistry.com/verify/?barcode=040232534218
Thanks
Your wrapper has overflow-x: hidden; Therefore the internal content is cut off when the width of #wrapper on the mobile phone is narrower than the width of the internal content.
Take overflow-x: hidden; off or change it to visible and you will be able to scroll to see the content.
At http://sallymilo.com/aem/, when I move my browser narrower, this template narrows to one column as I want. On my phone, however, I'm just seeing the whole template on one screen. I'm quite new to responsive design, so I must be missing something obvious to those of you who know better than I. Please advise.
It's an easy fix, you need to have a viewport meta tag in the head of your page, without this the default behaviour of mobile devices is to scale your page to fit the screen.
Here's a starting suggestion:
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
https://css-tricks.com/snippets/html/responsive-meta-tag/ has more details on some of the properties you can set within the meta tag.
I'm trying to configure a viewport for mobile Safari. Using the viewport meta tag, I am trying to ensure that there's no zooming, and that you can't scroll the view horizontally. This is the meta tag I'm using:
<meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
On my iPhone when I load the page, it seems to look okay:
But I can scroll horizontally, so that it looks like this (this is as far to the right as I can go:
When I swing it into landscape view, the page renders as expected, locking the horizontal scroll position.
I'm trying to figure out how to make this page not scroll horizontally at all. Is it possible that I've got some page element pushing the content out? I wouldn't even expect that to be possible with a correct viewport set, but I'm grasping at straws here.
Is it possible that I've got some page element pushing the content out?
Yes, that is indeed the case. The viewport setting only defines the visible viewport area but does not deal with turning off sideway panning.
So, in order to avoid this from happening, set an overflow:hidden on the element that contains your content, or else, avoid elements from overflowing.
NB: other mobile browsers also support the viewport meta tag since a while, so you'll want to test in those as well.
body { overflow-x: hidden; } also works.
Late to the party here, but I just had a similar problem where I had horizontal scrolling across an iPhone 5, the site was effectively showing as double the width, with the right hand half completely empty.
In fact, I just needed to change the viewport meta tag from:
<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0' />
to:
<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0' />
Adding the 'initial-scale' locked it down so that it only scrolled vertically as expected.
This will prevent any elements pushing content out:
body div {overflow: hidden ;} # media queries
Try this variant:
html, body{
overflow-x: hidden;
}