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.
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
This is my code:
<div class="box cntr" style="width: 52.9134px; height: 52.9134px; background: #c04848; border-radius: 50%;">
<h2 id="amount" style="text-align: center">3</h2>
</div>
The width is 52.9134px but when you open it in other device the element will become smaller than the original size in desktop screen. I want the element will be the same size in all devices like iphones, ipad, android phones and etc.
You can use
.myClass{
height: 15vw; /* or vh */
width: 15vw; /* or vh */
}
to remain a fixed aspect ratio between screen and element.
But you will have some trouble with portrait and landscape mode. You would need to write a media query or do something with js to account for that.
You could also use em or rem. rem would circumvent any changes you made to the font-size in a previous container.
Did you set your viewport in your HTML?
Do you have a width set on the html or body element?
You can check by debugging that when it is seen in other devices does it gets overridden.
If that's the case you can add !important after your style like this
width: 52.9134px !important;
Same for every other styles too.
Or if they are not overridden and you don't want to use !important (because some will say that's not proper according to standards) then use can use max and min according to your need.
If they are seen smaller then min-width: 52.9134px or if they are seen bigger then max-width: 52.9134px. Same for other styles too.
But remember one thing that you have to use !important if max min gets overridden too.
To prevent 'smart' resizing from phones and tablets, you should add the meta viewport tag to the head of the document:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This tag instructs the browser to NOT zoom out. It instructs the browser to stick to the device width and to NOT scale.
At some point I know I need to bite the bullet and do some serious reading on responsive and adaptive design, but I was hoping there was a really simple way to address this issue.
I have the following web page, shown here in my desktop browser.
And here is the same page on my cell phone.
Although it's probably hard to tell here, the banner is too small when viewed on my cell phone.
Ideally, I would like to have it so:
The width of the page content (and the corresponding width of my <footer> element, which has a top border) does not take up the entire width of the browser when it's full screen on the desktop, but does take up the entire width of my cell phone.
The banner would never be bigger than the pixel width of the image on my desktop, but would take up the entire width of my small cell phone.
Is there any simplified approach to this?
You can use media-queries to handle style changes based on the viewport. For instance, you can do something like:
JS Fiddle Example
/* Desktop Styles here*/
footer {
background: blue;
width: 500px;
}
.banner > img {
width: 300px;
}
/* When the screen is smaller than 560px, specify what properties you wan to change. */
#media only screen and (max-width: 560px) {
footer {
width: 100%;
}
.banner > img {
width: 100%;
}
}
Apart from media queries which you should seriously look into for serious responsiveness, you will also need to adjust the viewport meta tag in your header.
Add <meta name="viewport" content="width=device-width, initial-scale=1"> to your <head> tag to instruct the phone browser not to attempt to display the page as in a zoomed-out state.
So, for instance:
...
<head>
<link rel="stylesheet" type="text/css" href="Style.css">
<title>Hooray Banana</title>
<meta name="keywords" content="This page is a placeholder for future content.">
<meta name="description" content="sc web group">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
...
Then F12 and view in a phone emulation mode or check on your phone directly.
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.
I had wide length table with using twitter-bootstrap.css.
The content was sticking out from the edge of the table so I added this line to bootstrap.css.
min-width: 400px;
bootstrap.css
body {
min-width: 400px;
padding-top: 60px;
padding-bottom: 40px;
background-color: #27292b;
background: url('/assets/body-bg.jpg');
}
But now, When my smart-phone loads the page, initial looks zoomed up as default.
How can I make it fit?
index.html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
With bootstrap, it is not straightforward to show tables with large amounts of content, especially on mobile devices.
First think about how much content is needed on a mobile device, and if still a problem, you can increase the size of the mobile viewport by reducing the initial-scale in the viewport meta tag as so:
<meta name="viewport" content="width=device-width, initial-scale=0.5">
This would double how much you could see - adjust the initial-scale value as appropriate.
Have a look at http://twitter.github.com/bootstrap/scaffolding.html#responsive if you want to find out how to hide some of your <td> elements on mobile devices.