I am building a responsive website. However, when I view it in a mobile mode, the content I have is just 50% of the screen and the rest is white space. May I know why?
Also, how can I make my background image of my home screen responsive? Sometimes it is responsive and sometimes its not.I don't know where I am going wrong.
Many Thanks in advance.
Check all the way through the white space for any div elements sticking out. There will be a div that extends the whole way across the page. Once that is altered to be the same width as the other content it will fit to the screen width.
You are probably missing the <meta name="viewport"> tag.
Read more about it here:
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
Try inserting this one first in the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
Related
The site I created makes an unnecessary large width on the page. The page is supposed to fit to the screen of a mobile phone. But I seem to have to scroll to the right for nothing. This is the site: https://gwenlotest.000webhostapp.com/index.html
it works perfectly on big screens but as soon as I open the site on mobile websites I have to scroll to get to the burger menu and I don't understand why.
It is caused because of the elements that animate from the right. Look into putting them in another div that wraps these elements. The div will should have 100% width.
As you might notice, as you scroll down, when the elements animate from the right edge of the screen, the right extension disappears.
Add shrink-to-fit=no to your meta name="viewport" so it should be in the form
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
i think that should fix the issue.
I want to force browser, to set virtual viewport to a fixed value.
Typically the meta viewport in responsive page looks like:
<meta name="viewport" content="width=device-width, initial-scale=1">
i found a solution to set width to fixed value:
<meta name="viewport" content="width=1200px">
But unfortunately it works well only in chrome. What i want to get is with width lower than 1200 i want to turn on the zooming functionality.
Does anybody knows any other trick to do it?
EDIT
Actually the problem is, that i managed almost all layouts with bootstrap to achieve responsiveness. But client decided, that he don't want this page to be responsive, but make the width fixed regardless of device width and toggle horizontal and vertical scrollbars if needed.
What i am looking for is a realy easy warkaround, to do this without hudge style modifications.
Give this a try in jQuery:
if(screen.width < 1200){
$("meta[name=viewport]").attr("content", "width=device-width, initial-scale=1, user-scalable=yes");
}
I'm trying to make my site more "responsive" on mobile devices.
http://healthybodyguru.com
I've tried a lot of variations of the "viewport" meta tag, which is currently:
<meta name="viewport" content="width=device-width, initial-scale=1" />
But for some reason on my HTC Vivid, the page loads quite zoomed in:
Any ideas how I can adjust the viewport so the page is 100% visible on my Android?
Maybe try something like this:
<meta name="viewport" content="width=320px, initial-scale=1, maximum-scale=1"/>
I'm still trying to understand the viewport to be honest. But I think, I maybe got it now. The viewport width should be set to the default viewable width of the content. For example: If you just have an <img/> with width: 320px, than the image will be fullscreen if you use the code above.
initial-scale=1
Is causing it to load zoomed in. You can either remove it, or replace it with maximum-scale or minimum-scale (for whatever you're trying to achieve).
This code is working for me great ... I hope it will work for you too ...
// fit the width of screen
myWebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
// remove a weird white line on the right size
myWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
'Sup Stack!
So I've been getting to grips with the viewport meta tag and how it adjusts pages to fit to the devices viewport. I've had some help from stackoverflow earlier here:
Footer will not extend to 100% width on iphone, why?
mainly my concern was that my footer for my website wouldn't extend to 100% width. You can visit the website here:
http://gloryillustration.com/
And you can see my iphone solution here:
http://gloryillustration.com/tests/test13.html
where i managed to sort the webpage to display properly on iphone, by using:
<meta name="viewport" content="width=device-width, initial-scale=0">
And if you were to view this on the ipad the footer is displaying 100% width, but the entire page is now displaying as though its zoomed waaaaay out and its adding tons of white space to the right left of the page and under the footer as well. I take it that the website is adjusting itself as though it is being viewed on an iphone. But im not sure why it's adjusting like that? I would think that the content="device-width" would set the width to that of the device its being viewed on? Or have i misunderstood this completely.
Is there a way to set a viewport meta tag to encompass both ipads and iphones for this website?
Any help much appreciated!
Use this instead:
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />
You can see the result in play here http://www.premiumdw.com/case-studies/convert-a-960-grid-website-to-a-responsive-design/.
try initial-scale=1 instead of 0
for you wanna have it a 100% zoom, not 0%
I'm working on a website for a small festival for a friend, but I'm trying to work with mobile browsing WITHOUT fluid layouts, ect. It's just a website that I want to use the classic viewport script so it will be at the minimum zoom when a mobile device comes to it.
HTML
<meta name="viewport" content="450, initial-scale=1, maximum-scale=1">
That's what I have now however I have tried this way as well.
<meta name="viewport" content="width=device-width,initial-scale=1">
Yet every single time I come to the site on my mobile device it's zoomed in so you can only see the logo.
What am I doing wrong?
Also there are 2 other things I've noticed when viewing on the phone.
The footer background colour doesn't stretch all the way across (and it's no different if I have device-width OR width="XXX"). Yet the width of my footer is 100%. I don't understand what is happening here.
And I'm trying to put padding, or a space to the left and right of the content so the website isn't resting right up on the side of the window. I want to have space to the left and right. I've tried to put this on the html tag but it only applies it to the left side??
I've gone to https://developer.mozilla.org/en/Mobile/Viewport_meta_tag & http://www.quirksmode.org/mobile/viewports2.html and other websites and can't understand what might be happening in any of these cases.
Any help, advice, direction or guidance is VERY much appreciated.
To fix the background issue try adding this:
body {
min-width: 1024px;
}
You have the top sections of the page inside a container with an explicit width (960px), which is why you aren't having an issue with them. The footer however is on its own without an explicit width set. You could also just enclose it in the same div with the id 'container' you used for the rest of the page.
This should also fix your padding issue. Make sure you are adding it to the content containers. For example:
#main {
padding: 0 1.5em;
}
As for the zooming issue, I am not seeing it on an iPad or an iPhone. Since you are not doing any sort of fluidity or responsiveness this is what you should be using. What initial-scale=1 is doing is zooming it into to its actual width, not fitting it to your screen.
<meta name="viewport" content="width=device-width"/>
You might want to check out this question: Android ignores maximum-scale when using fixed-width viewport meta-tag for the Android issue. I don't have an Android device handy to test so I don't want to give you incorrect info on that part.