I have been trying to modify a Web app to handle different screen sizes. I am using the iOS simulator from Xcode to test. My results are weird so I am obviously missing the point. The app works fine on desktop Web browsers and centers the content on each Webpage.
The iPhone device type in the simulator using Safari seems to show pages with a horizontal offset and pushes everything about half way off of the screen to the left and it is not scrollable horizontally. The screen is positioned correctly vertically. If you use the iPad simulation with a larger screen size it centers as you might expect. I have the Web page AND Container sizes set to 320 x 480. I have played with the XOJO design time locks for the container on the Web page, screen sizes, and left position setting on the iPhone simulator. Nothing seems to work as I expect.
I am using the latest version of Xcode and iOS simulator but I have not tried the app on a real iPhone yet since it is “sort of broken” now with these changes. Before these changes it did work on a Linux Web server just fine but most of the Web pages are too big for an iPhone. In general you can scroll around and see the whole page on an iPhone so it seems to work as expected although it is not useful (hence the resizing of some screens).
MY QUESTION
Can anybody provide some general directions on how to set Web Page and Container Sizes, the use of Containers on a Web Page, and any other tips to make this work on different mobile devices? There are a few threads here that mention that adjustments for different size screens may be necessary but no specific tips of what works best.
Thanks,
Mark
With my limited experience this what I’ve learned about making a webpage scrollable if your content doesn’t fit on the screen… you will need to set the minimum width and height to be equal to the width and height you have set for your webpage in the IDE. Then you should be able to scroll both x and y on your ipad or iphone simulator.
As far as handling other screen sizes … and you may be doing this already…I think the best way to adjust for mobile devices is to have two sets of webpage windows as they do in Eddies Electronics (1 for mobile and 1 for normal web). Their startup screen identifies that they are on a mobile device and then shows the mobile pages in the app and if you’re not then it shows the standard web version. Do a search for WebSession.PlatformType to see how they used it in EE web example.
Rob,
I am making separate webpages for these. They started as separate pages but not targeted for mobile devices. I am now trying to resize them and that is the problem. I don’t really want a scrollable page. I started out trying to make them iPhone sized as my first attempt and that has been pretty much a failure. I am OK with detecting the device and having special pages and/or code for a custom size but I cannot even get it to work correctly hard coded for one size (iPhone 320x480).
It appears to me that if I set a webpage to less than about 640 pixels wide they act very “funky”. Some additional tinkering shows me that if the webpage is 640px wide and all of the controls are in a web container and set at 320px and centered then it “sort of” fits. I have a web dialog that slides down from the top with messages and when that happens and you close it the underlying webpage now is NOT centered (it shifts). The container appears to be shifted to the right margin of the 640px webpage. If the mobile device has a 640px wide screen (old non retina iPad) it works. The retina iPhone simulator does not. I don’t have an option of a non retina iPhone on the simulator.
This is making me crazy.
EDIT: My real iPhone 5 acts just like the simulator.