this site in development look fine in many different browser except on my iPhone4s safari browser. For reason i don't know, the full width image at the top is "scale"
site in question : http://studioteknik.ca/stada/
The question is, why the scaling append, and what to do to get it perfect as in desktop browser.
Other sub question : do you know a library that can help make mobile and destop look the same, i mean for image but for text sizing.
The question is not localized or precise, it's a development question for crosse browser compatibility. Thanks in advance.
And BTW, i test it in iPhone emulator online, witch they all pretty much sucks, and don't really show reality, but they show all the site correctly! so i am more mystify that anything else (as opposed to being help)
To prove my point, here is a screen capture of my iphone render : http://studioteknik.ca/stackoverflow_question/stada.jpg
Goggling for the right thing (resized sprite on safari iphone) lead me to the right answer. Here is the solution and some other site i have found interesting, helpful information.
from : http://www.teknocat.org/blog/web-development/show/6/mobile-safari-background-image-scaling-quirk
It turns out the reason for this is a resource limit on the iPhone - the amount of memory an image can use once downloaded and opened. This same limit applies to mobile Safari on the iPod and iPad. Note that this limit is nothing to do with the file size. The maximum limit for images is 1024x1024x3 (3,145,728). If the width and height dimensions of your image multiplied together exceed this value, the image will be down sized. The result can vary depending on the viewport size (whether you're on an iPhone or an iPad).
and more resources :
http://www.thecssninja.com/css/high-res-sprites
http://coding.smashingmagazine.com/2012/08/13/coding-qa-with-chris-coyier-responsive-sprites-responsive-font-sizing-media-query-efficiency-more/
http://www.studiopress.com/design/css-background-size-graphics.htm
http://perishablepress.com/target-iphone-and-ipad-with-css3-media-queries/
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Related
I created a website. The images on the projects page appear blurry when viewed in mobile safari. The images on the project detail page however, are perfectly sharp.
I can't figure out, what's blurring the images. The images' resolution is high enough, so it doesn't have anything to do with the retina display.
You are using html to resize your images. Use photoshop or in code to make a seperate, resampled smaller version of the files.
Browsers resize images poorly, you should use software to resize (can be done in your own code if you like).
Just putting an image size into your markup will make it do a non-resampling resize which often looks rubbish.
This link is dated, but it says what you need to know...
http://graphicssoft.about.com/od/aboutgraphics/l/blresizehtml.htm
The only reason this works on yor pc is that modern pcs will do resampling when they resize in the browser. Not all will do this and mobile ones likely won't.
I've been a Flash animator for a few years and recently tried my hand at developing a simple iOS application using Flash CS6 and AS3.
When I began development I was creating for the iPhone 4S' screen size, however now with the release of the iPhone 5 the new screen size obviously doesn't fill the screen, resulting in the black-bar letterboxing at the top and bottom of the screen.
I have three questions to ask:
Is it possible to release two different versions of the app onto the App Store for separate devices or does it have to be universal? (I believe the answer is the latter but I can't find a definitive answer)
Is it possible to have a stage size that matches the iPhone 5's larger display but cut off the bottom (for example) for the previous iPhone sizes, in effect just adding some information to the bottom of the screen exclusively for iPhone 5 users?
If (2) is not possible, is there coding examples available change positions of items on the screen? For example, I have a title and taskbar as well as a background, could I code it to stretch to the size of the device screen rather than the stage? And would I need to alter the stage size or is there code available to do that for me?
I'm quite new to the programming aspect of AS3 and I'm sorry if there are answers that you feel that I should know, but I'm really thankful for your time to read and answer and I thank you in advance for your replies!
Ben Kahan
While all of your options are possible, you'll want to make sure your program dynamically lays itself out and resizes visual assets depending on screen size, pixel density and orientation.
More here:
One Application, Five Screens (Including the iPad)
and
Writing Multiscreen AIR Apps
You should look into doing number 3! 1 will be a hell to maintain, 2 will piss off users with smaller screen. If you design your application a bit more flexible, that would also mean you have an app that works on android ;)
I don't have any particular code for handling different screen sizes, but I remember reading about it back when Adobe introduced FP for mobile. This article gives a lot of good advice for delveloping for mobile (even though it is a bit old) -- maybe you can find something that is more up to date though google :)
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.
Apple recommends cropping out the status bar from screenshots submitted to the app store. Doing this manually in Preview is a very tedious and error-prone process.
Do any developers have any best-practices recommendations or automated techniques for speeding up this process? The goal would be to take as input iPad and/or iPhone screenshots, and output them with the toolbar cropped off. We need to support both portrait and landscape orientation, and Retina-resolution iPhone screens.
I've found a few utilities online that purport to help with this, but the ones I have found seem to fail on Retina-display resolution screens. And another that works via the iOS Simulator requires a 1920x1080 resolution monitor to process iPad screenshots - making it useless for non-17" laptop-based developers.
Any other recommendations for taking good screenshots for the AppStore? I know (based on my searching) that there are a lot of other developers who would be interested in a quicker workflow to handle this.
Bonus points for being able to bulk-process an entire directory.
I developed a free App, Status Barred which is on the Mac App Store. It crops your iOS screenshots from iPhone, iPad, portrait, landscape, normal & retina display.
I used the ImageMagick command line tools to batch crop all the Screenshot png files, but haven't figured out how to not use auto assigned output filenames.
convert Screenshot*.png -crop 640x920+0+40 920Screenshot.png
Here are two ways, assuming you mean status bar and not toolbar (which you probably shouldn't crop out of the screenshots).
If you have photoshop, just change the canvas size by subtracting 20 (low-res) or 40 (retina) and anchoring the bottom of the image. This works perfectly.
It's also easy in iPhoto using the Edit/Crop feature. Set the dimensions to the correct size (Portrait: 320x460 or 640x920 and Landscape: 480x300 or 960x600) and move the crop screen to the bottom of the image. This does it perfectly as well.
After much searching, the easiest tool I have found is the iOS Simulator Cropper. It does a great job of handling different resolutions and orientations, and it is painless to use. No need to muck around with Photoshop or other slow / cumbersome tools.
Link: http://www.curioustimes.de/iphonesimulatorcropper/index.html
The developer reports that they have enhanced the iOS Simulator Cropper to bulk process screenshots taken on device as well as via the Simulator. I haven't tried this yet since the update, but if it works well this will be the perfect solution.
I have also found a very useful tool in the Mac App store called "Status Barred" that also very simply crops the status bar out of any images handed to it.
How about just using Preview? Command+A to select all, drag the selection down to 920px then Tools => Crop.
For example, preparing a launch screen of 320 x 480 would have to be changed....
How is that going to work for us? Are programmers always going to have to be submitting a high-res that will be scaled down for old devices such as the iphone 3g?
The size of the screen is basically 4 times on a pixel by pixel basis. So each pixel of your image for example gets boosted to 4.
What this means for you? You don't have to change your App, your app will scale to the hi res screen for you, same with your UI and images within your UI. Of course if you want to take advantage of the better screen quality you will have to submit hi res images.
I haven't looked at going the other way but I believe it would be a similar case.
One exception to this is text. It automatically scales to the higher res for you for free. So text will look super sharp. One problem with this is if your loading image has text based on the original load screen that wouldn't look the same as when the high res text loads.
Strictly speaking, anyone who's seen the documentation on how they're handling this is still under non-disclosure until Monday, when the new iOS ships.
Suffice to say, it's clever. You'll be able to put both high and low-rez versions of ALL your images into your app, and then load them into your app in a way that's totally transparent from the code side. The device will make its own call about which version of the image is appropriate for the kind of screen it's got.
Now that the WWDC 2010 videos are available for free to any registered iPhone developer (or ADC member), I recommend watching Session 134: Optimize your iPhone App for the Retina Display for a full description of what you need to do to support the iPhone 4's new display.