Specifically, the "max-device-width:" condition
If you're on a Mac, you can use the iPhone simulator that comes with XCode. I've also used a Firefox add-on called "Modify Headers" and I send iPhone headers, however, that may not help much with max-device-width.
For mac or PC, if you can upload your files to any temporary server, you can check the results online in TestiPhone: http://www.testiphone.com/
This is a web browser based simulator for quickly testing your iPhone
web applications. This tool has been so far tested and working using
Internet Explorer 7, FireFox 2 and Safari 3.
The firefox plugin Developer toolbar let you change the browser size with just one click to the device size. I bet there is plugins like that to the other browsers. If you can't find that to all browsers then I suggest that you just upload your code to a server and surf to it using an iPhone.
Related
We are facing few HTML/CSS issues on rendering our HTML email on Apple mail client on iPhones
Is there a way one can inspect and debug the issue?
Does Apple provide any emulator/tool to do the same?
What worked for us is Epiphany browser. It mimicked the restricted ability of Apple mail client to render HTML far more closely than any of the solutions below -
google chrome, firefox, safari in responsive design mode
Someone suggested to try emulator in XCode but I couldn't get hold of Apple mail in Xcode -> Window -> Devices and Simulators
You can download an emulator in xcode and visually inspect most Apple devices in emulation.
A simple approach is to use Google Chrome. The engine powering Chrome is based on Webkit, which is the same html engine that powers Safari and IOS and iPadOS devices. The Inspector can allow you to inspect a variety of devices in emulation.
You can do much of this with Apple Safari as well.
A third approach is go post your code, define the problem and let people see if they can determine a fix.
Good luck.
I'm trying to get an iPhone browser emulator to work on my website so it will work on all platforms. Are there any Javascript snippets that emulate the iPhone browser? I need it to zoom and browse the web, but the bookmark function is not required.
There isn't such a thing, as the iOS browser has a number of differences to any desktop browser.
The closest you could have is an iFrame surrounded by a picture of an iPhone, and instruct people to use Safari 5.
If you're on a Mac, you can use the iOS Simulator. Download Xcode from the App Store and with it comes the iOS Simulator, which also has the Safari app virtually exactly as is on the iPhone.
http://www.browserstack.com/ does exactly that. It ain't perfect, but it works..
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/
I'm working on a web application, and we are targeting the iPhone and iPod Touch. I'm familiar with the debugging tools for FireFox and IE (e.g. Firebug and IE Developer Toolbar), but I can't find anything for the iPod. I am not looking forward to using alert as my main debugging tool, especially when I expect mouse events to be one of the major issues.
Is this really the state of the art? What tools do you recommend?
Also, how similar is the html layout on an iPhone to that of Safari running on Windows? On a Mac?
The iPhone version of Safari includes a debug console that can be very handy. Settings > Safarai > Developer.
You can also use the Simulator in the iPhone SDK. There's no extra debugging, but it's easier than using a physical device all the time.
You can also use the desktop version of Safari for many things.
The web tools that target the iPod Touch and iPhone arenas include
[iPhone Remote Debug Console](
http://code.google.com/p/iphonedebug/)
BlackBaud Simulator for Windows
[MobileSafari Simulator](
http://www.testiphone.com/)
[iPhoney](
http://marketcircle.com/iphoney/)
While WebKit has a remote inspector, it is hard to enable on an actual iOS device (at least without jailbreak) and so most tools for it are simulator-only. iWebInspector looks promising for this, but keep in mind the simulator's WebKit library is not identical to the device's.
That's where weinre comes in. With weinre, you can "debug a web page displayed on your phone from your laptop". How it works is you run its custom HTTP server that hosts two things:
a JavaScript file you include on the page you want to debug
an Inspector page that you load on the machine you want to debug from
You start the server e.g. java -jar Downloads/weinre.jar --boundHost -all- --httpPort 4242 and then put a script tag like <script src="http://weinre-server-name.local:4242/target/target-script-min.js"> in the source code for your webpage and load the inspector by navigating to e.g. http://weinre-server-name.local:4242/client. When you load the target page on an iPhone on your local WiFi connection, the connection will show up in the client page on your mainframe and you can use the Inspector tabs to view/edit the page on the iPhone.
It has some limitations (no Javascript breakpoints and such) and can be a little laggy, but overall it's pretty magic.
There is also a nice tool called iWebInspector
http://www.iwebinspector.com/