My website is responsive but on mobile it allows me to pull it slightly to the left, ive tried all the view point metas i could find online and nothings working. On inspection there is nothing overlapping the screen so i cant see why it is showing this whitespace.
Here is the page in inspector view with the html tag selected
Im currently using
<meta name="viewport" content="width=device-width; initial-scale = 1.0; maximum-scale=1.0; user-scalable=no" />
Related
I have added the meta viewport in the header
<meta name="viewport" content="width=device-width, initial-scale=1">
as well as #media tags in css but on mobile, I am still able to scroll horizontally.
This is what I wanted, webpage not able to side scroll on mobile but this is what I currently have.
Edit
This is what happened when the webpage is zoomed out. Maybe this will help to make the situation clearer.
I am testing my site https://www.industrialstores.com/ in google page speed but user experience under mobile tab, it is showing to correct this "The page content is too wide for the viewport, forcing the user to scroll horizontally. Size the page content to the viewport to provide a better user experience."
I set my viewport in header as
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I tried different viewports defined in different stackoverflow question but not able to find my solution yet.
<meta name="viewport" content="width=device-width, initial-scale=1">
Check out: https://css-tricks.com/snippets/html/responsive-meta-tag/
Morning All,
I'm hoping someone can advise me on the amendments I need to make to my website's CSS to make it display correctly on a mobile device.
At the moment when you view the website in mobile device the menu navigation is displaying at the same size as if it was on a desktop PC, but the rest of the website looks absolutely fine.
From which I can see the navigation uses % once it hits a specific width.
So how can I correct this issue?
I look forward to hearing your fixes.
Please see the website below:
http://www.blanchel.com/
try this:
<meta name="viewport" content="width=device-width, minimum-scale=1.0" />
if you don't want to allow zooming, add max-scale at the end:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
I have the following viewport
<meta name="viewport" content="initial-scale=1,user-scalable=1">
On android, the page loads as if it were in a desktop - the whole page is viewable and zoom-out to fit the screen
on ios - the page loads without zoom-out, and what is viewable is the upper left corner of the page.
I've tried using width=device-width and width=1350 but nothing seems to work
What do I need to do to make the page load so it would fit the screen fully no matter the screen size?
Why don't you use this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I think it's most recommended meta tag.
My website is built using HTML5 Boilerplate, and is being cropped on the iPad when the iPad is positioned vertically, but appears the way it's supposed to when the iPad is horizontal. Here's the link to the site I built: http://designedbyallison.com/hhsc/
Basically, the area that shows the website is being scaled down while the website design elements themselves appear to be the right size within the iPad display area.
I've tried to locate which lines of code in the CSS or JavaScript files control this aspect of the website but can't figure it out. I have even tried removing the JavaScript and CSS within the html file and the scaling issue is still apparent. Any help is appreciated.
You may find the <meta name="viewport" /> tag helpful.
I'd start with
<meta name="viewport" content="width=device-width; initial-scale=1.0" />