I've just stated using the viewport unit, not sure how to handle this so any feedback is appreciated.
I've created element
<h4>text here</h4>
added some style
h4 {font-size:7vp;}
This is excellent on mobiles devices, phone and laptops. But once the screen size exceeds that of a laptop to keep up with the viewport width, the height of the text gets two large for the viewport height.
If you know what I mean.
Im looking for something like
max-size:
but more like
max-font-size:
There is no such thing as max-font-size but you can use media queries to detect when the window is now desktop size. For example:
media screen and (min-width: 768px) {
h4 {
font-size: 14px;
}
}
This will override your font-size from vh to px when the window size is larger than 768px.
Note: To use media queries make sure you add this tag in your main html file
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Related
My question is basically all in the title. I am wondering if there is a way to adapt the display of ones app not only depending on the width of the device's screen but also depending on its height.
Let's take an iphone for example: The iPhone XR has a viewport of 414 x 896, while the iphone 8 plus or 7plus have viewports of 414 x 736.
So the width is the same but not the height. I am trying to display some content that fills the screen, but from what I know, I can only make that content responsive to the width of the device.
There are ways to go around like putting everything inside a container and set it's height to 100%, or something like that. But I was wondering if there was a similar approach to the viewport.
HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
CSS:
#media screen and (max-width: 720px) {
}
Thanks!
I'm working on responsive design. My goal is to make my website responsive for all sizes.
Generally, I increase the font-size of my elements as the width of the device increases.
But what if the width increases and the height remains the same? I was thinking about this scenario while creating a responsive design.
ex: 400x300 500x300 600x300
In this scenario, as width increases I increase the font-size. But the height stays the same leading to oversized elements because the height stays the same, when the font-sizes are increased.
So as other users have said before what you want to do first is include this meta tag in your html header:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
then you would go to your CSS file and select a certain veiw size.
#media (min-width:300px) and (max-width:400px){
.myClass{
height: 18em;
font-size: 1em;
}
}
This #media allows the CSS to run ONLY when the viewport is within the specified range, in this case between 300px and 400px. You can treat it just as any normal CSS modification, change height, font size, color, background etc. Just remember to open and close your #media with curly brackets{} just like you would when you select an element in CSS.
I use this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Hope it helps!
When I view my website example page on on my iPad there isn't enough width really so its all a bit cramped up because many columns (especially when you expand the sections). So I twist my iPad to view the page in landscape
and instead of making use of the extra space it just makes the font larger, how can I get it to consider the extra width it now has.
Just add
html{ -webkit-text-size-adjust: 100%; }
This was already discussed here;
Preserve HTML font-size when iPhone orientation changes from portrait to landscape
Use the viewport meta tag to improve the presentation of your web content on iOS. Typically, you use the viewport meta tag to set the width and initial scale of the viewport. For example, if your webpage is narrower than 980 pixels, then you should set the width of the viewport to fit your web content. If you are designing an iPhone or iPod touch-specific web application, then set the width to the width of the device. Refer to Supported Meta Tags for a detailed description of the viewport meta tag.
Because iOS runs on devices with different screen resolutions, you should use the constants instead of numeric values when referring to the dimensions of a device. Use device-width for the width of the device and device-height for the height in portrait orientation.
You do not need to set every viewport property. If only a subset of the properties are set, then Safari on iOS infers the other values. For example, if you set the scale to 1.0, Safari assumes the width is device-width in portrait and device-height in landscape orientation. Therefore, if you want the width to be 980 pixels and the initial scale to be 1.0, then set both of these properties.
For example, to set the viewport width to the width of the device, add this to your HTML file:
<meta name="viewport" content="width=device-width">
To set the initial scale to 1.0, add this to your HTML file:
<meta name=“viewport” content="initial-scale=1.0">
To set the initial scale and to turn off user scaling, add this to your HTML file:
<meta name="viewport" content="initial-scale=2.3, user-scalable=no">
Create responsive web interface, is not merely the thrill of seeing the display changes when the browser is in big-minimize its resolution. But also accommodate the display to be able to perform comfortably in a variety of devices, browsers and resolution.
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
html { -webkit-text-size-adjust: 100%; }
}
These are proper media queries to limit this particular css to only iPad in portrait and landscape. Doing it this way shouldn't have any effect on your desktop view.
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 am building a responsive website which will be running on smartphones like iPhone having high pixel density screens. I know that in order to maintain legibility, mobile phones' browsers report a resolution half that of actual screen resolution.
I searched about this and found that this behavior can be controlled by using css media query of device pixel ratio (for e.g. #media screen and (-webkit-min-device-pixel-ratio: 2) ) for iPhone.
I tried using this by putting my entire css code within this block, but my iPhone still displayed the page exactly as it was displaying it without using this media query.
How can I force iPhone and other high pixel density mobile phones to display my webpage at its actual resolution? i.e. for iPhone 5, it should display my webpage at 640px*1136px and not 320px*568px as it is now showing. I know that this will make my text appear smaller, but I still wish to format my webpage like that.
I am using the following meta code in my HTML:-
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
Thanks.
Putting your CSS rules in the media query doesn't affect how the browser renders it, if you don't change the CSS rules. You could try with something like this:
.element {
width: 100px;
}
#media -webkit-device-min-pixel-ratio: 2 {
.element {
width: 200px;
}
}
Basically you can explicitly double the size when the device pixel ratio is double. Unfortunately with this technique you have to use a different media query with different sizes for all possible pixel ratio that you have to deal with.
Otherwise you can play with the width attribute of the viewport meta tag. If your page has a fixed-width layout, you can set its width as viewport width. For example if you have use a "standard" with of 960px, you can use the following meta tag:
<meta name="viewport" content="width=960px">