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.
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 have a design that currently looks very squished on mobile because the font sizes are so big. My audience is split 50/50 on desktop & mobile readership.
Is there a way for me to create responsive font sizes? Can I scale font-sizes down to 80% when viewed on mobile?
Let me know if this is possible
I've tried adding the below code to get the font to adjust, however it did not budge.
<style type="text/css">#media only screen and (max-width:480px) {
#-ms-viewport { width:320px; }
#viewport { width:320px; }
body {font-size:80%; }
}
I expect font-size to scale down by a specified %, such as 80% on mobile.
To add a mobile specific font size to your email text, use a media query to set the font-size at a certain screen size. A responsive “fluid” way to do this is to use the viewport width unit (vw) instead of pixels.
Viewport-width uses 1% of the viewport width as the standard size from which to work from. For example, the viewport-width of an iPhone7 is 750px, therefore 1vw is 7.5px. In this case, we set font-size: 2vw to get 15px. This is responsive to screen size; as a viewport gets bigger or smaller the font will be responsive.
Along with font-size, we need to also adjust the line-height to ensure it is consistent. Experimenting with the number here can give different outcomes, and in the case above, line-height:3vw is enough to ensure the text isn’t squished.
To ensure the font doesn’t become too big, we add it to a class within a media query that will only work on a smaller viewport size. To ensure the font-size in our media query displays, we include !important to override the inline font style. Check out the example code below:
<style type="text/css">
#media screen and (max-device-width:640px), screen and (max-width:640px) {
.mobfont {
font-size: 2vw!important;
line-height: 3vw!important;
}
}
</style>
Then, we add the class mobfont to any text we want to resize:
<td style=”font-family: ‘Timmana’, Helvetica, Arial, san-serif;” class=”mobfont”>Responsive Text</td>
More info here if you need it. https://www.emailonacid.com/blog/article/email-development/best-font-for-email-everything-you-need-to-know-about-email-safe-fonts
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 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.