With all types of screen resolutions and devices - desktop or mobile, it's kind of hard to pick the right widths for your website. In my case, the website is to present a photographer's work so I've opted for these widths:
1340px
1180px
1000px
480px
But say an iphone 4S (native res is 960 x 640) is positioned vertically, what wrapper would the device display? Would it resize the 1000px wrapper into 640px or would it pick the 480px?
You'll want to start by learning the basics of Responsive design. Check out : http://www.abookapart.com/products/responsive-web-design
Due to the ever changing nature of device sizes, you may want to avoid trying to target specific devices/resolutions. Start with a narrow screen and expand your window until the layout breaks. Add a breakpoint there. Continue expanding and adding breakpoints as your content dictates.
Related
Wondering if there is a way to blanket "magnify" an entire screen layout including all widgets & properties such as text scaling etc.
I have discovered there are a few screens which can do best as a simple magnification instead of a completely different layout when going from mobile to tablet sizes. Is there a way to shortcut this as opposed to totally different layouts?
The end goal would be nearly exact same layout but every element on tablet is larger.
I have a problem when I try to change screens , from iPhone X pro to iPhone 8 ( landscape mode). The button don't resize correctly when I make the change.What should I add to the Canva or buttons to get a better size.(Same issue for the panels)
CanvaInspector
ButtonInspector
First of all, if you want your application to just work in landscape mode, then you can set the Reference Resolution as X:1080 Y:1920, set the Match value as 1 (this is based on how you want your UI to react, so you may want to keep it as 0), set your preview screen size as 1920x1080 Landscape, and try to build your application based on that reference, it will make most of the things easier. Furthermore, if you anchor your UI elements properly, it will react to different resolutions without any problem. For the anchors and pivots, you may want to take a look at the unity documentation for basic layout.
However, if you want your application to work in both portrait and landscape mode, then the general idea is more or less the same, you may want to play with your reference resolution and match value (for example, setting the match value as 0.5 will make the UI resize by considering both height and width equally). This documentation can help you to understand it better.
I also know that some developers design different UIs for landscape and portrait mode separately and then activate/deactivate them based on the orientation of the phone. This can also be an option.
Coming from the Android world, I'm trying to create my first IOS app in swift.
Actually stuck to build interfaces that are adpative to all screen sizes from Iphone 5s to Ipad 12.9".
Autolayout works well except that I can't find how to easily adjust font size and margins for each screen sizes.
Maybe I've missed or miss-understood something in my research but my question is :
How can I have big margins/font sizes on big screens and smaller margins/font sizes on smaller screens ?
Is it possible to have like a constant for a margin for each device or range of screen size in one place so I can easily change it ?
Update :
I forgot to mention that I also tried variations on constraints and font size but theres just a few options between "regular" and "compact" and if you need to change a margin you have to change it on all your elements it's seems crazy..
In Android there's a dimension xml file by each screen size/resolution you want where you can have contants and assign them to each element you want.
I can't figure out the logic behind IOS here
Thanks in advance
So, how do they look? Tiny? Does chrome/the OS scale them up? I'd like to publish an app but I don't have a high dpi screen to test this things out and I'm really curious about it.
If they in fact look tiny, would a device-pixel-ratio media query that sets the html font-size fix it? All my units are set in rems, no images and only a few text.
Chrome apps generally look great on high-DPI screens -- just as Chrome itself does.
Even if your CSS specifies all dimensions in px, those are CSS pixels, and adapt to the display based on the device-pixel-ratio.
With rems, and no images, your app should look much better on a high-DPI display than on a standard one.
Low-DPI Images on a high-DPI screen can look pixellated -- not because they are tiny, but because they have been scaled up, and they are being presented beside crisply rendered text. For those cases, there are techniques that you can use to present high-resolution images to those displays, and standard images to others.
The other issue to be aware of is drawing with a <canvas> -- if you want a sharp image, you have to remember to scale the canvas area by device-pixel-ratio, and scale up all of your coordinates the same way as you draw.
I've noticed css sprites seem to show 1 more pixel than they should when viewing them on the iphone. My site works perfectly fine on all major desktop browsers on mac and PC. But when I view it on the iphone you can see 1 pixel of the adjacent sprite image.
Anyone encounter this before? Any suggestions on how to cleanly fix this? I know I could just modify all my sprites to have more separation in between them, but is there an easier way?
UPDATE: Tested zooming with safari, and noticed the exact same problem occurs at certain zoom levels on desktop safari
Better late than never:
It's not a bug or a software flaw, it's simple mathematics: the (older) iPhone displays websites at 980px width on a screen that is 320px wide (in portrait mode).
So it's a rounding issue: let's say an element is 50px wide. It is displayed at roughly a third of its size, and that is causing the problem: the iPhone will display it at either 16px or 17px width. Even if it was exactly one third, the problem would remain, and the same applies to various zoom levels, of course.
If it's 16px, you're fine - you have probably noticed that the issue doesn't occur on all your elements. If it's 17px, it means that the element is displayed slightly larger than intended, and the adjacent sprite will show.
I checked apple.om on an iPhone 3G, and even their navigation bar shows some odd little artifacts at the bottom - they're just barely noticeable.
So in theory, it should be enough to add 1px around each sprite. Having to change all these elements is a bummer, but it seems to be the best solution. The problem isn't likely to go away either - the iPhone 4 obviously still scales things down, at least in portrait mode. Not to mention all the other smartphones out there with far inferior screens.
Add another 1px of space between the icons.
.:edit:.
Just noticed that this was one of your proposed solutions. Check the elements with the sprite and make sure that they are the right size. (Double check the rendered border-box model in Firebug).
It could have something to do with how the mobile phone renders items.