I am playing around with viewport and tried to do a width of 520, but it seems to do device-width instead. Any ideas?
<html>
<head>
<meta name="viewport" content="width=520, initial-scale=1, maximum-scale=1, user-scalable=no">
<style type="text/css">
h1
{
width: 980px;
border: 1px solid red;
}
h2
{
width: 520px;
border: 1px solid green;
}
h3
{
width: 320px;
border: 1px solid green;
}
</style>
</head>
<body>
<h1>I am a big heading 980px wide. Yes I am</h1>
<h2>I am a big heading 520px wide. Yes I am</h2>
<h3>I am a big heading 320 wide. Yes I am</h3>
</body>
For pages that set an initial or maximum scale, this means the width property actually translates into a minimum Viewport width. For example, if your layout needs at least 500 pixels of width then you can use the following markup. When the screen is more than 500 pixels wide, the browser will expand the Viewport (rather than zoom in) to fit the screen:
<meta name="viewport" content="width=500, initial-scale=1">
This was derived from this LINK.
So I am assuming that in your case too since you have set the html tags width to more than 520px the browser is taking the 520px width as minumum width and working upwards from there to render the larger tags.
This article seems to suggest that content="initial-scale=1, maximum-scale=1, user-scalable=no" is the issue, and that if you're trying to create a fixed viewport they should be omitted.
I haven't had a chance to test it myself, but the rationale seems sound.
Hope that helps.
It's hard to rely on the viewport meta tag for width. As this article points out:
Sometimes the formal screen.width does not make much sense because the pixel count is just too high. For instance, the Nexus One
has a formal width of 480px, but Google engineers have decided that
giving the layout viewport a width of 480px when using device-width is
just too much. They shrank it to 2/3rds, so that device-width gives
you a width of 320px, just as on the iPhone.
Those 320px are "CSS Pixels," meaning that 320 pixels is the width of the viewport, no matter how wide the device or document actually is.
If you are specifying a width larger (or smaller) than the phone's actual size and restricting scale, you will have problems. Try removing initial-scale=1, maximum-scale=1, to allow the browser to scale the page to fit the device correctly. You can still keep user-scalable=no and width=520.
Your Header tag(H1, H2, H3) width are 980px, 520px and 320px respectively.Your headers tag has hard coded width hence what ever the device width will be but your header tag width will be same and will not become responsive. I think instead of providing width in pixel why you don't use width in %. And you can also put the header tag in one container made that container position:relative even you can made relative to your individuals header tag.
Related
I am working on a search engine for my website where results are displayed within a div along the middle of the page. Since I would like the search engine portion to be useable on mobile as well, I decided to use a media query to change the width of the div that search results are contained in to be 100% when the width of the screen is less than or equal to 500px, using the following media style rules:
#result_box {
width: 60vmin;
min-height: 100vh;
background-color:red;
}
#media screen and (max-width: 500px) {
#result_box {
width:100%;
}
}
With the following chunk of html:
<body>
<?php $var_value = $_SESSION['query_literal']; ?>
<div class="result_entry">
<hr id="seperator">
<div id="result_box">
</div>
</div>
</body>
However, the width of my 'result_box' is still 60vmin when I test on a mobile device. Does anyone have any idea how I can change this?
I'm pretty sure you didn't set the viewport meta correctly in header or forgot at all about it.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
With this the the browser knows how to control the page dimensions and scaling.
Basically without it your website won't work responsivly.
width=device-width means you set to the width of the page to follow the screen-width of your device
initial-scale=1.0 sets the zoom level to 1 when the page is loaded
I've checked documentation on multiple sites, and they all agree that max-width should be overriding width in CSS. For some reason, though, it's always staying at 800px. This is my CSS:
.content{
width: 800px;
max-width: 100%;
}
This should be making it stay at 800px wide unless the window gets smaller, and then shrink it, right? I also tried the other way around:
.content{
width: 100%;
max-width: 800px;
}
This gives me the same result. It's always 800px, no matter what. I had thought of using min(), but it turns out that was removed from CSS (though why, I have no idea). Does anyone know what I'm doing wrong?
I should point out that I have included <meta name="viewport" content="width=device-width, initial-scale=1.0"> in my header. That has no effect.
You must know that the device-width maybe larger than 800px, if ti's larger than 800px, so your max-width:100%, will not work unless some other wider dom than 800px distract the wrapper.
I have the following markup: (simplified)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
<body>
<div class="wrapper">
<div class="content"> (absolutely positioned stuff) </div>
</div>
</body>
with the following styles:
.wrapper {
width: 100%;
height: 100%;
}
.content {
width: 640px;
height: 640px;
margin: 0 auto;
position: relative;
background-color: orange;
}
On a desktop (screens larger than 640px x 640px) my square is top and center, which looks good. On mobile portrait, my square is top and fills the width, which is also good and perfectly acceptable. On mobile landscape (screens less than 640px tall), however, my square fills the entire width and the user will need to scroll to see the bottom of the square, which is not acceptable.
What I'd like to achieve is for the square to fit the height of the screen so it can be seen in its entirety in landscape view. I'm trying some media queries out now to see if that helps. Otherwise, what would be the best way to achieve this?
I've tried changing .content to height: 100%, but because most of its contents are absolutely positioned they end up having 0px height. As such, ideally the square should still be 640px x 640px in size, just scaled to fit the screen so the contents can stay put.
Thanks.
This is the ideal case for viewport units. Where 100vw is the the width of the viewport, and 100vh is the height of the viewport.
You should be able to find some more information on the different units here.
One thing to note though, is that using height related viewport units can lead to some odd effects on Mobile Safari and Mobile Chrome, because the viewport height can change on scroll. The various behaviours of Chrome and Safari on mobile with regards to this have changed over the years as they try to figure you out an ideal solution. I find if I need to rely on vh units I often use a little bit of javascript or css to then "lock" the object at that height on mobile.
You can find other tips for that issue if you run into it in this Stack Overflow Post
I Just can't figure this out.
I'm build an html game and all the game fonts are bigger in my iPhone4 than they are in my pc browser (Chrome).
I'm using this tag on the html:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
The font size is set at 4em in the buttons with the "-webkit-text-size-adjust: none;" css property in the whole body.
I know it has something to do with pixel density and the iPhone resolution, but I tried everything and I can't make them both look the same.
If I remove the html viewport tag, then the fonts end up looking much smaller than they're supposed to be.
Thank you.
Do you have the appropriate media query for it? 4em on mobile is huge, I normally don't go above 1.2-5 em on mobile sites.
add this in your css
#media only screen and (min-width: 1px) and (max-width:590px){
/*what ever the element is*/{
font-size: 1em;
}
}
You could try use viewport height for your font sizes. font-size: 5vh;
It will scale your text based on the height of the viewport(window) so it should scale aright between browser and mobile.
I have a page i've created which works fine in a desktop but get's messed up in a mobile browser.
This is the mobile version. I have a header and a .container(the one with gray background) set to width 100%. Inside .container i've a .wrapper set to width: 900px; and margin: 0 auto;. Why is the blue background and the gray background rendering till about half of the page witdh? What is the best way I can approach the problem to create a page like the desktop version on the mobile as well?
I believe your wrapper may be causing the issue. Instead of setting a fixed width for the object do:
.wrapper {
max-width:900px;
width:100%;
display:block; //for centering
margin:0 auto // for centering
}
Should solve your problem and make the website more responsive throughout different platforms.
Good luck! :)
NOTE
If you are not already doing so, take rajkumar's comment and add:
<meta name="viewport" content="width=device-width, initial-scale=1">
It's your wrapper and li width. Set them to percentages.
.wrapper {
width: 90%;
margin: 0 auto;
}
li {
width: 30%;
....
}
if you want create a site for both desktop and mobile..Try all width in percentage.because percentage only fit width automatically according to screen resolution.suppose you give in pixels the screen was not adjustable in all screen resolutions.its only fix according to your size only.
In your case please make sure for all width in percentage.
and also please conform the media type for get screen width in header section
<meta name="viewport" content="width=device-width, initial-scale=1">