<div class="container">
I have simple container class.
I read the documents and understand.
It has both side spacing for PC screen, and it has full width for mobile screen.
However in my iphone simulator, it dosen't become full width, it remains spacing both side.
(I guess it is because of iPhone high resolution??)
If I use container-fluid, it becomes full-width on iPhone Sim.
I want to have with spacing on PC and full for mobile.
What is the best practice???
Try adding a meta tag with viewport inside your <head> tag.
This tells smaller device browsers how to scale the page.
It is more explained here.
https://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972
<meta name="viewport" content="width=device-width, initial-scale=1">
Related
I've defined the width and height of all my web page elements in pixels, which lead to huge blank spaces when displayed on larger screens. It's quite time-consuming to redefine everything to percentages. Is there a way to make my current webpages fit to any size screen automatically
This gives you a responsive web design to fit any mobile, tablet, and laptop screen.
---> W3schools gives a better explanation <--
add the meta tag in the
<head> in between these lines </head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I have a website that has a container in the middle of 800px, it has auto margins on both sides so it stays in the center.
Now what I want to do is to have the page be displayed withouth the left and right margined sides on mobiles, so basically I want to have it stretch out the 800px to the device width on mobile and tablet devices.
I tried using viewport meta tags but they don't seem to do much:
<meta name="viewport" content="width=800, initial-scale=1">
I think this just keeps the width to 800 when the devices has lesser pixels, but it will just keep my margins when the device has higher pixels
I also tried:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
But it seemed to behave exactly the same way.
I am using c# asp.net and i can detect what my device is and change the viewports accordingly, so if I am using a desktop or laptop browser I will use a different viewport meta. I just can't figure out how to ge the result I want on mobile.
Any suggestions?
Css media querys to change the layout depending on width will help.
#media screen and (max-width: 900px){
#div_to_hide{display:none;}
}
Further reading:CSS media queries
I've a page with a sidebar setup with bootstrap. When I reduce the width of the page in my browser, the sidebar goes from FULL -> COLLAPSED -> TOPBAR (meant for small screens like phones) as the width decreased
But strangely when I access this in my phone, I only see the COLLAPSED version of the sidebar whereas on that small a screen I should be seeing the TOPBAR.
I can't understand how to debug this since it works correctly in my PCs browser on reducing the width!
Any wise CSS heads here who might know what the problem might be? You can check out the sample page here.
Please add below meta tag to recognizance device without this tag this responsive design not work in mobile : Add between <head> tag
<meta name="viewport" content="width=device-width, initial-scale=1">
'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.