What is the maximum possible width that won't cause horizontal scroll bar when the monitor resolution is 1024x768 ?
I tested my self and found out that 1008px but i want to be sure. I want to design the website with maximum possible width that won't cause any horizontal scroll bar at the desktop computers browser and when the resolution is 1024x768px
Thanks for the answers.
From my experience, I would recommend you to set the max width between 980 and 1000 px... It feels nice when the website shows a bit of background on the side(s). But, 1008, as you measured it, it's ok.
Common advice is that for the 1024 resolutions you have a maximum width of around 960 or 980px to work with. But if you really need to get every last pixel in, I can confirm test results from Windows XP running at 1024×768, with Internet Explorer 6.0 fully maximized, gives you a width of 1007px to work with.
ref: http://philfreo.com/blog/largest-website-width-to-support-1024x768-resolution/
Related
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
Ok, I have been pulling my hair out for a few days now and thought I would ask the community how to deal with width sizes or the gaps between buttons in xcode 6.4 or 7 (tried them both).
Ideally I want 2 buttons near the bottom and they need to scale properly based upon iPhone portrait mode.
I have added the 1x, 2x, and 3x pngs of the button to the asset system and my auto layout is set for wCompact hRegular which from what I understand allows you to target all iPhone devices in portrait mode.
So after adding my buttons I had it do add missing constraints which added a few and seemed to work pretty good but the issue im running into is the gap spacing between the 4.7 inch and 5.5 inch and how to adjust each one of those separately in interface builder if possible.
See the image below where I outline the gab space and its quite huge for the 5.5 inch.
Also it would be awesome if I could use bigger images for the bigger phone but thats another subject I guess.
Since I cant post images here here is the link to the story board
Take a look at this repository..
https://github.com/mahesh-agrawal/Test-Autolayout-Buttons-Spacing
i have added required constraints to make the gap between the buttons dynamic for all devices. also i have made the width and height dynamic by giving proportional width height.
I have taken two views and given them horizontal spacing 0 and equal width and leading and trailing required for each. and then i have taken two buttons in each and managing width of button with proportional to the views so they will increase accordingly and also the gap will increase accordingly. Test in all devices.
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.
I came up with a design where I have a larger canvas nested inside my main one. The main one I will refer to as ctx. I move the larger one around and ctx masks it nicely. I did my dev in chrome and safari and it works nicely.
When I host it and check on my iPad3 I discover some limitations.
Apparently there is a maximum limit set to the height and width for an html5 canvas in iOS !
So I stripped down my code to a basic handful of lines to do testing. A 2000 x 2000 canvas will nest fine and display on an iPad3 but when I go up to 3000 x 3000 it shows blank.
I'm now left with a burning question - what are these maximums and do they differ for older iOS devices?
I did try searches but I can't find the answer so I turn to stackoverflow for help.
I've run into this before as well, I think the problem is the amount of available video memory. It's not a specific width/height that is a problem, it's the width multiplied by the height, and the actual number is probably hardware specific.
Hate to say it, but I think you're just going to have to try it out and see what you can/can't get away with. Design your app around that restriction.
Note that the iPad 3's retina display means this it actually has slightly worse video performance than older generations.
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.