How can i set font Size in pixels?
Hello,
Designer send me sizes of app components. Header must be 60 pixels
, but if i put font size 60, it is very big. How can i adjust it for pixels. Thank you. (IOS DEVICE)
You cannot do pixels on mobile. You do DPI. Tell your designer to get with the tech. He's designing for web. While you can figure out how many DPI correlate to how many pixels for the current device (its a device specific thing) with the PixelRatio API - https://facebook.github.io/react-native/docs/pixelratio.html - it's putting in effort to make your design worse. DPI works great across different screens/sizes.
Related
I want to change font sizes depending on breakpoints globally through redux, what is the standard way to scale typography for different screen sizes for mobile apps.
Can someone please guide me whether this is font sizes changed in accessibility settings or these are guidelines for setting font sizes for different screen sizes ie: small, medium, etc
and if yes then what exactly what is the screen size of small device and which screen sizes are defined in small. I need a standard for all break points(screen sizes)
enter image description here
I have tried scaled metrics and changing font Sizes using the dimensions library in react native but my CTO is saying that it doesn't scale properly according to apple's guidelines
I used scaled metrics and changing font Sizes using the dimensions library in react native but it doesn't scale properly according to apple's guidelines.
I'm working on a react native application in a company and my manager asked me what is the best image size in pexels to upload from API (dashboard) to fit the View in the application ?
And I'm using percentage units not numbers: (width: '80%', height: '50%') I don't know what is the best sized of images to fit or the aspect ratio of the image and react native is unitless!
What should we add 'Hint' for the client in the dashboard when he upload any image ?
Or how could I know the best image dimensions to fit all screens ?
In our organisation, we usually follow the following convensions to make an image fully responsive.
Get the dimentions of the image using: const {width, height} = Image.resolveAssetSource('path-to-your-image');
Get the ratio factor of width and height by using: const ratioFactor = height/width;
Whenever you set the width of your screen by 'n' digit, set the height to 'n*ratioFactor'
In this ways the image can never be stretched or compressed. It will be fully responsive according to it's dimensions.
Preferably use image with standard dimentions as 1024 x 768 pixels.
In case the app target both iOS and Android, there is a multitude of devices with various resolutions and pixel densities from high-end iPads to low-end androids devices with smaller resolutions.
The General rule of thumb is to find the average image size which will not pixelated (look blurry) on the high-end devices but does not have a large download size in case some users will have slow internet.
You should start with 1024 x 768 pixels which is a standard dimension for iPad
Consider using resizeMode prop of react native image. With resizeMode you can manage to render image based on available space in screen.
Check it here : https://reactnative.dev/docs/image#resizemode
I'm trying to create a 2D cross-platform game (primarily for android & ios in portrait mode, however compatibility with a tablet/desktop would be a bonus) and I'm trying to wrap my head around scaling of my sprites.
I've looked online, and I've ended up setting the following in my Project Settings > Stretch
'Mode' : 2D
'Aspect' : keep-height.
According to https://www.mydevice.io the viewport of my android phone is 360 x 640px (the standard 16:9 ratio for mobiles). But obviously phones/tablet screens come in all sorts of dimensions.
If I wanted to create a sprite with a width exactly 1/3rd of that of my screen/viewport, how should I go about doing this? Should I be creating multiple sprites of various dimensions (in say, GraphicsGale) to account for different screen sizes, or should I be purely doing this scaling in Godot?
I know there's a 'scale' property in Godot, but I can't see a way of setting my image width and height via pixels or by a percentage of the viewport.
Have you tried setting the sprite size depending on the viewport height and width ?
$sprite.size.x = get_viewport().size.x * 0.33
$sprite.size.y = get_viewport().size.y * 0.33
You can check out this reddit post if this is not working.
I have converted one of my Windows Store applications to a universal application and added a Windows Phone project to it.
When rendering the graphics (Image and Rectangles with ImageBrushes) the graphics always gets scaled even if I set it to not scale which is not how expect it to work.
Example:
I have an image that is named test.scale-100.png which is 27*27 pixles.
The same image exists as a 32*32 pixel sized image named test.scale-140.png and another named test.scale-240.png which is 59*59 pixles
I use this image in my default layout the following way:
<Image x:Name="imgTest" Source="/Assets/test.png" Stretch="None"/>
When I start my app with the Windows Phone 8.1 WVGA 4 inch emulator the 32*32 image is shown with the correct bounds, but the actual image is scaled (I can see that quite simple because the content gets blurred).
The same happens when I start the app with the Windows Phone 8.1 1080p 6inch emulator; The image is 59*59 pixles but the image is a bit blurred.
How can I force scaling to not be performed?
Thanks in advance for any help!
I am not sure. I am looking for a solution right now too. But I found that scaling is not supported in Windows Phone 8.1. Only Windows Store apps are working with scaling. Take a look at link below.
http://msdn.microsoft.com/en-us/library/windows/apps/dn263244.aspx
So, the way how to scale images is to use height/width propreties to force size of image or you can use BitmapImage and its property DecodePixelHeight/DecodePixelWidth together with Height/Width properties to decode the image.
Hope it helps ;)
I have the same issue, I think this is an OS bug:
Test 1
test.scale-100.png +
test.scale-140.png +
test.scale-240.png
= Blurry result
Test 2
test.scale-240.png
= Blurry result, again
Test 3
test.scale-240.png renamed to test.png
= Sharp result!
The problem occurs only with certain assets, not all. In my case only in some DataTemplates. I think that in some situations the system scale the image incorrectly, with an horrible blurry result. If you leave only the "scale-240" image, it is blurry. If you rename it removing "scale-240", it becomes sharp!
In summary, name the image as test.png and stop.
As MSDN says:
Don't use images that aren't sized to multiples of 5px. Units that aren't multiples of 5px can experience pixel shifting when scaled to 140%, 180%, and 240%.
https://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh465362.aspx
Your Width="53" Height="53" could be the issue of incorrect behavior
I have an app that creates a large bitmap and later the user can add some labels. Everything works great as long as the base bitmap is the default 96x96 resolution. If I bump it up to 300 for instance, then the text applied with Graphics.DrawString is much too large - a petite size 8 or 10 font displays like it is 20.
On the one hand, it makes sense given the resolution increase, but on the other, you'd think the Fonts would scale. MeasureString returns a larger size when measured on a 300 vs 96 dpi bitmap, which wasn't really what I expected.
I've tried tricking it by creating a small bitmap of the appropriate size, printing to it, then pasting that to the master image. But when pasted to the high res it enlarges the pasted image.
The only other thing I can think of is to create a high res temp bitmap, print to it, then shrink it before pasting to the main image. That seems like a long way to go. Is there a compositing or overlay type setting that allows this? Are font sizes only true for a 96 dpi canvas?
Thanks for any hints/advice!
The size of a font is expressed in inches. One point is 1/72 inch. So if you draw into a bitmap that has 300 dots-per-inch then your font is going to use a lot more dots for the requested number of inches. So when you display it on a 300 dpi display then you'll get the size in inches back that you asked for.
Problem is, you are not displaying it a 300 dpi device, you are displaying it on a 96 dpi device. So it looks much bigger.
Clearly you don't really want a 300 dpi bitmap. Or you want to draw it three times smaller. Take your pick.
If you want a consistent size in pixels, specify UnitPixel when creating your Font object.