Safari: how to size the browser for the iPhone size (or some other solution)? - iphone

I am coding a web app for an iPhone and I'm wondering how best to use Safari to develop for the iPhone, the main problem being that I've got is that Safari apparently cannot be resized to the narrow 320 pixels of width. How can I do that?
Any other tips and tricks?

If you are looking for an environment to test, Ripple emulator seems a nice option.

I had the same problem and solved it quickly and simply by using a 320x480-sized iframe. Additionally, I added options to change the size (iPhone portrait, landscape, iPad, status bar or not, ...) and presto! an iPhone “simulator”!
Edit: that also allows the use of the Web Developer tools, they're invaluable in Safari or Chrome (I prefer to use the latter, but both are Webkit-powered).

The absolute best way is to use a real device - iPhone or iPod touch - so you get a proper feel for how the device responds. If you're doing hefty animations, for example, testing on a desktop computer may leave you scrambling once you realize the entire page lags horribly on a real device the day before launch.
Barring that, you should use the iOS Simulator that comes with the xCode iOS SDK.

You can use a browser extention or plug-in. For Safari there is ResponsiveResize for instance. You can donwload it here. It allows you to use a predefined browser size, or use any custom size you'd like.

Related

Iphone app on Ipad - make Ipad select 640x960 instead of pixelated 2x320x480

This is for avoiding an extra target and writing any target-specific adaptation code for the Ipad, separate apps on App Store, etc etc - but instead let the Iphone app display in 640x960 rather than 320x480#2x using the "2x" button.
Even on a non-retina Ipad, there's room for 640x960, but the Ipad is still running Iphone apps on the Ipad as if they were made only for Iphone 3GS.
This is for an app used internally by a company and any authorized client/partner. The company has bought Ipads, but the clients/partners may want to use the Iphones they have.
So, I'm looking for a compile-time target flag or a snippet of code to execute to detect the platform is Ipad and make it display the window full-size.
Has someone succeeded in doing this and if so, how did you achieve it?
This isn't really how things work ... you're trying to create a workaround that will probably take you longer to get to work (if at all possible) than it would if you just commit to making iPad friendly layouts.
If you just make the project a universal binary, then it would run "natively" on the ipad rather than in iphone compatibility mode. After that, the simplest thing you could do is just make sure your view's resize masks are set correctly so they stretch. Depending on the complexity and makeup of your app, many times this is enough to get you through. However, in many cases it would behoove you to just make an ipad specific layout as usability is oftentimes greatly improved.

UIGetScreenImage with iPhone app used on iPad

My app uses the UIGetscreenImage () method to take a Screenshot, which works perfectly fine using iPhone simulator or an iPhone.
Now I wanted to use my app, that is targeted for iPhone on my iPad too.
Doing so, the Screenshot will only be the upper right corner of the iPad display, in the size of an iPhone display.
Changing the app target to iPad would fix the problem, but screws the complete UI, so it is a rather bad fix.
You know some other way to fix the problem?
Using the UIGetScreenImage method is no problem, as it isn't targeted for the AppStore, and I like the advantage of the statusbar included in the screenshot.
But if their is no other way to fix it I can also use another method for making screenshots.
thx for your help :)

iPhone VS ipad development process (differences and similarities)

I am new to iOS development. I am trying to figure out these things.
A project both in iPhone and iPad. what things are same for both (coding, graphics or UI)?
Design Pattern of apps are same or different?
waiting for answer
Thanks :)
Personally, I find that the only real difference between the iPhone and the iPad is the UI and UX. Most of the code is the same for both applications. (In fact, you can even reuse a lot of code if you are doing a universal app!)
The main difference really is the screen size. The iPad is huge in comparison to the iPhone, and this difference gives you a lot more options to work with.
Another thing to note is that the iPad is usually done in landscape orientation, whereas the iPhone is done in portrait. This is not an absolute rule however, it's just the way I see it.
The graphics aren't too different between the devices, except that because of the large screen size, you can do a bit more detailed work with the iPad images then the iPhone images. (Even with the retina display, too fine detail on the iPhone is barely noticeable.)
The other thing I wanted to mention is the flow of the devices. Again, because of the screen size of the iPad, you can fit a lot more content on the screen, and therefore have to push to new views less frequently. I've worked on apps where we had 3 UIViewController's for the iPhone version, and only 1 for the iPad version.
In short, it depends really on your type of app. If you have a lot of content, and want to display it all at once, go for the iPad. If you want a streamlined, minimal approach to your app, go for the iPhone.
Again, this is all just my personal opinion. Hope that Helps!
You can use native controls without much theming and customization on the iPhone. But iPad is a bigger beast. Users use your iPad app for a longer time. iPhone apps are used for a short stint and then closed, used again for a short stint and so on.
Analytics published by Flurry showed that the average time an iPhone app is kept open is about 1.2 minutes. Design and develop it in a way that data is available as fast as you can.
iPad apps are used in a relaxed setting. While I don't have the numbers, it's probably used more often and for a longer time than an iPhone app. Themes and custom UI elements do matter a lot there
Second, iPad apps need to be supported on all orientation (or at least a minimum of two orientations)

Easy ways to crop out the status bar when taking iOS Screenshots?

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.

Not getting clicks in iPad version of my iPhone application

Using the latest SDK from Apple, I noticed that while running on the iPhone works fine, the iPad version of my application doesn't "accept clicks" on any view/widget that is outside the "bounds" of the standard iPhone screen.
Any idea?
Thanks,
Reuven
Vanilla iPhone apps will only accept touches within that little bounds, to reproduce that fact that the iPhone resolution is only 320×480.
To fix it, upgrade your app for iPad.
(Also, make sure you don't hard-code any numbers. For example, use [UIScreen mainScreen].bounds.)
OK - found it...
All I needed to do was to open MainWindow.xib in Interface Bulder, and in the Window Attributeds palette, to check "Full Screen at Launch".