I'm really new with flex. I want to develop an app for multiscreen resolutions. I can't figure out exactly what i need to do.
I read this article here but it still it's not that clear what i have to do.
Can anyone explain how can i keep the same size and design across multiple resolutions?
How can i achieve Density independence ?
Do i need to have 3 different resolutions for a background picture for example?
What screen resolutions does my background image needs to be ?
Thank you!
To achieve density independence and hit multiple screen resolutions, you need to be prepared for any and every screen possible. From the low-res iPhone 3/GS to the super hi-res Nexus 10. There is no specific screen resolution your background image needs to be because, well, there are hundreds of resolutions it will need to be.
Instead of making the background a set resolution, consider constructing it with code. Either through a repeatable tile or by using multiple images and putting them together to form your background.
You definitely will want to use one image for each Adobe resolution (160dpi, 240dpi, and 320dpi). You can do that by using this:
<s:Image>
<s:source>
<s:MultiDPIBitmapSource
source160dpi="#Embed('assets/ui/images/phone/info-image-160.png')"
source240dpi="#Embed('assets/ui/images/phone/info-image-240.png')"
source320dpi="#Embed('assets/ui/images/phone/info-image-320.png')" />
</s:source>
</s:Image>
Assuming you created everything in vector, this is relatively simple. Just take the image you designed for 160 (which is what most people seem to design for) and enlarge it to 150% for 240dpi and 200% for 320dpi.
For true density independence, you also need to make sure you are not using applicationDPI in your application tags as that will force a specific resolution.
For CSS, you should follow this format (taken directly from the first link below)
#media (application-dpi: 160) {
s|Button {
fontSize: 10;
}
}
/* IOS only # 240dpi */
#media (application-dpi: 240) and (os-platform: "IOS") {
s|Button {
fontSize: 11;
}
}
/* IOS at 160dpi or Android # 160dpi */
#media (os-platform: "IOS") and (application-dpi:160), (os-platform: "ANDROID") and (application-dpi: 160) {
s|Button {
fontSize: 13;
}
}
You need to consider everything. Images, fonts/font sizes, component sizing, hardcoded component placemenets, etc. You can take a look at the Capabilities class for any idea of what kind of data is available to you at run time as well. If you end up getting incorrect values using things like stage.stageHeight, consider using FlexGlobals.topApplication.sys(tem?)Manager.screen.height instead. That accounts for DPI whereas stageHeight does not.
Also Read:
Support multiple screen sizes and DPI values in a mobile
application
Related
I've designed a dashboard for my site that on my screen looks fairly nice. My resolution is 1920x1080 at 100% zoom. My dashboard looks awful on my coworkers computer because he is at 3200x1200 at 300% zoom. Another coworker is 1280x720 at 150% zoom. I'm having difficulties figuring out how to account for all of these drastically different screen sizes.
I have been using media queries and a grid system to move certain components around based on the screen size, but I feel like I'm not correctly understanding the best way to deal with a vast range of screen sizes. I'm also having a difficult time even testing how my dashboard would look on certain screens because I can't set my resolution to 3200x1200 at 300% zoom.
What I would like to have happen is essentially set up break points for if the screen is a tablet size or smaller to rework the order of my components, but for anything above that, just essentially have the screen sort of shrink so the layout looks the same for every laptop.
To implement this I have tried things like this:
`#media (min-width: 1400px) {
.dashboard {
zoom:70%;
}
}
`
but I've heard using zoom isn't smart for production sites because it doesn't work on all browsers. I have also tried using webkit and transform, but while that shrinks that dashboard, it also shrinks the overall width and height so it no longer covers the container.
This may be tagged as a repeat question, but the only things I found similar were from 8 years ago and the methods were completely different.
Today, i discovered The resolution CSS data types and i don't find a real usage for this. Has anyone ever used this functionality or any examples use case ?
One real-world example usage is when performing printing of web document:
#media print and (min-resolution: 300dpi) { ... }
The above media query will display given styles when printing DPI is set at minimum of 300dpi.
If you have some content that requires at least 300dpi (artist / photographer etc.) you could require the viewer to have at least a 300dpi screen. If the viewer does not, you can put out a message saying they don't have a screen with high enough pixel density to view the content.
Imagine you’re displaying images, via CSS, in a same-sized element:
.my-image {
background-image: url(path/to/image.jpg);
/* Exact dimensions of image */
height: 200px;
width: 200px;
}
This will look fabulous until you see this on a higher DPI screen. Incidentally, many smartphones and tablets do have higher DPI screens. With a media query, you can serve higher quality images.
#media (min-resolution: 72dpi) {
.my-image {
background-image: url(path/to/image-large.jpg);
}
}
Basically progressive enhancement. Users with lower DPI screens will run at you, hold you in their arms, and thank you for saving precious bandwidth.
This is not a duplicate question, because I don't want to target the iPhone 6 specifically, I want to target ALL smart phones and mini tablets, icluding the iPhone 6, 7, 8, etc and Android, etc
I'm trying to find out a useful CSS media query to detect smart phones.
So, I was thinking, the following would fit perfectly since the screen resolution in px on an iPhone 6 is almost the same as the one from a desktop screen with a pixel ratio of 1:
#media (max-device-width:16cm){ /* I need the PHYSICAL device width */
...
}
However, I'm not sure if this translates interally ALWAYS to 529.2px (1cm == 37.8px) or does it really respect the actual device width in cm of the hardware?
Because, in my opinion, what really matters is the physical space available, and I don't care at all how many pixels there are to represent this area in order to decide how much content I want to show.
You can't use centimeters because some devices have their pixels further apart.
However what you could do is check the device's pixel density. Here is how you can use a media query with the pixel density.
#media all and (min-resolution: 150dpi)
{
body
{
// do something
}
}
The second way would involve some JavaScript as described here.
Media query in pixels is all you need. Screen resolution and viewport width are 2 different things.
You can check http://viewportsizes.com/?filter=iphone for view port width. The link has the iphone filter but you can remove it to look at other phones.
I usually use 768px as a cut of point. Anything above or equal to 768 I use a desktop view and anything below I use a mobile layout. It's not device-dependent, you are simply checking the view port width or browser width to determine what should be shown.
http://www.lexus.ca uses this cut off point, I am just linking this to give you an example
The picture pretty much explains the problem.
On mobile phones, my clean/crisp repeating background (position center bottom, repeat-x) looks like crap. It doesn't actually appear that large on the phone - it looks visually the same size as on a computer, but - I assume since the phone is a higher resolution, it's making it look pixelated and choppy.
I can't believe I've never come across this issue before, but searches for the subject just turn up "how to make repeating backgrounds on mobile" or "how to do full-screen backgrounds on mobile"...etc.
How can I make a background image that will look clean/crisp/good on both mobile and computer?
I tried making the image 200dpi instead of 72dpi, but - no luck.
Whilst the optimal solution is SVG, the easiest way to do this is using pixel-density media queries.
e.g.
.container {
background-image: url('images/bg.jpg');
}
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
.container {
background-image: url('images/bg-2x.jpg');
}
}
If you are using preprocessors this becomes even easier as you can create mixins for different breakpoints including pixel densities.
In my mobile app I use kind of big fonts for example:
<b style="font-size:100px; font-family:Segoe UI">text</b>
When I test it on my phone it looks great but on a smaller phone it's still the same size and it is too big.
What css settings should I use to get the same size on every phone?
Media queries won't work. Yes you can have varying font size based on the screen size(which is pixel size and not physical size, therefore it would not be the same size on two devices with same physical size screens but with different pixel density). Your goal is to have text that is at the same physical size across all devices that have same physical screen size regardless of pixel density.
Nowadays mobile phones are fitting Ultra HD resolutions in palm size screens whereas older phones had much lower pixel density.
There was no solution to this problem until recently. Recently CSS3 added support for what they call 'Viewport Sized Typography'. It allows you to set the sizes of things relative to physical screen size. It is explained here.
Having text with same/similar sizes is desirable across devices and you don't get that by default. It is not because of smaller devices have less or smaller physical pixels, but is due to scaling that happen on those devices in order not to break pages that are mostly designed for larger desktop screens.
For example, iPhone 5 has 1136x640 physical pixels, but using chrome's developer tools' device toolbar you may see that some elements appear to be much larger than that (say 1300x900). That is because of the zoom out scaling that browsers apply by default. In this case, CSS pixel size would become much smaller than actual pixel size. Imagine seeing a desktop size page in a smart phone, just much smaller.
If you don't want that happen, you need to tell the browser explicitly not to mess with scaling (in your pages header):
<meta name="viewport" content="width=device-width, initial-scale=1">
If you see text equally big across devices, you may have something like that and need to just remove it to see it smaller on smartphones.
You should be using Media Queries for different device widths.
#media only screen and (max-width: 768px) {
b {
font-size: 20px;
}
}
#media only screen and (max-width: 320px) {
b {
font-size: 10px;
}
}
And so on...
I have started using REM and EM to achieve this.
I don't know whether a phone browser's default font size changes based on screen size or specific to device. So what I do is I set the HTML to a font size relative to an average of the height and the width of the device using vw and vh like so
HTML{font-size: calc((1vh+1vw)/2)}
By using REM and EM from here you get a more consistent layout and font size across the board.
This works well for mobile devices as they all tend to be the same sort of aspect ratio. I would recommend changing how you implement this for tablets and desktops as their screen ratios tend to be quite different. Of course, use media queries to have separate styles for these.
I would like to say that I just started using this method so would love to hear reasons why I totally should not be using it!
Use #media Queries and set different fonts for different resolutions
Example
#media all and (max-width: 1200px) and (min-width: 800px) {
/* Change Resolutions Here */
b {
font-size: 12px;
}
}
Good Read On Media Queries
Alternatively, you can have a look at https://github.com/modularscale/modularscale-sass
It can quickly get very complicated to set a lot of breakpoints to cater for every single mobile device and I've obtained very good results with modular-scale.
Also, setting the font-sizes in EMs or REMs is the way to go if you want to be fully accessible/flexible.
The answers are all correct but I find the combination of viewport size related but limited to between two values ideal by using clamp() For example:
font-size: 1rem;
font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
This will smoothly size the text but not under 1rem (typical 16px) or over 1.25rem (typical 20px). It can be used on the size of icons or font-awesome chars or svg vectors. I use one of the many online clamp calculators to spare me the maths. For instance this one.