There's a web page at http://examinemysite.com/foodRating. The webpage shows properly in two iPhone emulators as shown below. However testing using a real iPhone and a real WP7 phone, the size of the text and the stars are a lot smaller. Why are the physical devices not showing the same page like the emulators (same size text, stars and spacing)? The emulators are running under Windows 7.
IBBDEMO:
MITE:
You're using tools that simply try to display what they think would be displayed by MobileSafari. IBBDEMO is, if I'm not mistaken, an Adobe Air application. I'm not sure about MITE, but I don't think it has any special knowledge of MobileSafari either. These tools seem like nothing more than web browsers that display in a small 320x480 window with an iPhone image wrapped around the display area. It would be fairly astonishing if they did a perfect job of simulating MobileSafari.
Related
I have a WordPress site, allthingsbahai.net, running WordPress version 4.7.9, that is no longer displaying correctly on iPhones and iPads. When the site first loads, the logo displays correctly. On subsequent pages, including the home page, the logo is overly large and distorted. What is strange is that the logo displays correctly on Android phones, and also on the computer regardless of how small the browser window becomes, so it seems to be specific to iPhones and iPads.
We have tried using different images for the logo, but they all act the same. This problem has only developed in the last month or so. Before that, it was working fine.
I have a companion site, bahaistudiesinthecovenant.com, running WordPress version 4.7.9, using the exact same logo image, which displays correctly on all devices.
Does anyone have any ideas?
I'm looking for a way to test my web layouts for mobile devices without having to buy the actual hardware. I'm primarily interested in testing for the iPhone and the iPad. I own an iPhone and so can do a proper test there. But I'm unable to know for sure what it looks like on the iPad. Either way: it would be nice to check the visual output on my Mac as I'm building it for productivity sake.
testiphone.com is supposed to simulate the appearance of a website, but there is a difference in rendering the layout scale: On my iPhone hardware, the content's width is scaled to fit the left and right margins of the screen. In the testiphone.com simulator, the content is not scaled at all.
So does there exist a method that can test visual layouts consistently?
(I'm not opposed to subscribing to the Developer SDK, but if there's a faster and easier way to get the viewport and scaling to behave consistently, I would prefer it!)
You can download an SDK with a free developer account. You will not have access to beta versions, but you won't need them for testing web layouts. Go to http://developer.apple.com/ios and click the link for "XCode and iOS SDK". It will ask you to log in with your apple id, and set up a free developer account if it isn't registered with one. Then, use the iPhone Simulator application to test your website.
I've been using Safari on Windows and the iBBDemo Blackbaud iPhone Browser Simulator to emulate an iPhone but I have noticed that Safari does not render form elements using the default control styles. Safari on iPhone supplies default control styles that are specific to iPhone. This means my web forms look nothing like they do on an actual iPhone.
Are there any style sheets or iPhone Web Design Tool Kits that will style the form elements exactly as they should appear? Or is there an online service that provides screenshots of how a web page looks on an iPhone?
If you have a Mac, then the easiest way is to use the iPhone Simulator. It might not be suitable for your purposes, though.
There are a lot of things which you'd need to do to get the rendering right (there are a lot of rounded rects, and the user can scale the page to an arbitrary size, and strange things sometimes happen when you rotate the device).
On the Mac I got the iPhone Simulator but under Windows and Linux enviroments I need a webbrowser which emulates the behaviour and size of the iPhone browser. I'm not looking for a website with a frame with the iPhone screen size but an actual application. Prefably webkit based so it will behave as much like the iPhone as possible. It should also be able to send the same browser headers as MobileSafari in the iPhone and if not it should be possible to modify the headers. That could be done in a menu in the program, support plugins(which have the power to modify headers) or the progam should be opensource.
It might not exist and if not thanks anyway. However if it does that would be awesome. If you know a program which have some of the mentioned features but not all of them an no one have posted a better one feel free to post a link/the name of that browser (still better then nothing or a framed site in Safari).
tldr: iPhone like browser, same window size and headers as MobileSafari.
Try one of the following:
Blackbaud iPhone Browser Simulator
iPhone Drift web browser for Windows
MobiOne iPhone and Palm Pre emulator
So far as I can see, only the first of these actually uses Safari as the rendering engine, and it is using Safari for Windows rather than Mobile Safari, but it should be close enough I think.
try iphonedrift on windows
I want to test a website to see how it works with the iPhone but I don't own an iPhone or an iPod touch. Is there a way I can test how the site works on them without owning one?
What I'm really after is fixing how Stackoverflow's WMD markdown editor works on the iPhone. I hear that the hyperlink and image prompts are created too high. I think I know how to fix that but it's pretty tough to develop blind.
If you own a Mac, you can download the iPhone SDK which comes with an iPhone simulator. It works not only for debugging a native app but also for browsing the web.
If you have Safari on your computer, you can enable the "Develop" menu under Preferences > Advanced > Show Develop Menu in Menu Bar.
With this enabled, you can go to Develop > User Agent, and change the user-agent string to the device you want your browser to report to the web server as.
By resizing the window to the appropriate width, you can emulate what the site will look like on the iPhone.
The upside of this is that it's quick, it works on both Windows and Mac, and you don't need the iPhone SDK installed. You can also browse iPhone-specific versions of websites that catch user-agent strings directly from your PC.
The downside is obviously your Safari browser on your PC will behave quicker than on the actual device (especially in regard to javascript performance); it displays plugins and shows fonts that may not be available on the actual iPhone OS; a lack of multi-touch support and "snapping" to columns while scrolling; no auto-rotation; no multi-touch/pinch-zoom; widgets will look different; etc.
Just a notice on this old thread - we have now enabled live testing on iPhones and iPads via vnc at CrossBrowserTesting.com.
Ken - Founder
There is a free app on the mac that emulates the iPhone browser: iPhoney
I don't purport to have done more than a web search, but the problem seems to be solved by several products that are "iPhone web app emulators."
http://www.testiphone.com/
http://marketcircle.com/iphoney/