I am trying to make my webpage mobile friendly. So, I am using Chrome DevTools to design a mobile version of my webpage. I have it the way I want it to look in DevTools. I uploaded it to my website & viewed it on a actual mobile phone & objects are not in the same places as they are in DevTools. I used the iPhone 6 mobile design in DevTools and also view it on an actual iPhone 6. They don't match. Anyone else have this problem? I have read articles about this, but don't know how to fix it. Any ideas? Should I use a different emulator?
This is Chrome DevTools version on iPhone 6:
This is how it really looks on an iPhone 6:
DevTools technical writer here. DevTools is just a simulation of mobile devices. It can't truly simulate an iPhone. So it's always a good idea to check how it actually looks on the devices that you care about (like you did). I don't think there's any bug or issue here. It's just an instance where the DevTools simulation doesn't reflect reality 100%.
Mac users can use Xcode's Simulator (that's the actual name of the simulator) to emulate any Apple mobile device and see exactly how their website will appear on it.
You can use it to open Safari and access your localhost. I used it to fix issues on my website, issues that I could not reproduce in DevTools' device simulator.
Clear the cache for on your browser to ensure that your phone is accessing the most recent updates to your code.
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.
Firstly please excuse me and redirect me if this is the wrong community.
I am finding it increasingly relevant to be able to share my mobile device's screen (Android or iOS) while presenting from my laptop (OSX). I am familiar with Chrome's "Inspect Devices", however this doesn't include some items outside of Chrome, such as Push Notifications. What would you recommend?
There's a Chrome extension called Vysor for Android devices.
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 am looking for iPhone emulation software to test a couple of internal web applications against the iPhone. There are a few quirks occuring with iPhone users that would like to fix but I am unsure how to test them.
For example one of the issues is that numbers are showing up as phone number links on the iPhone which 99% of the time is incorrect. On regular Windows Safari this doesn't occur.
There are also formatting issues with fonts and spacing that occur on no other broswer except the iPhone version of Safari.
Emulator must be free and work under Windows. Suggestions?
There is a Windows build of WebKit embedded inside an iPhone-like shape called Blackbaud iPhone Browser Simulator. You can download it here http://labs.blackbaud.com/NetCommunity/article?artid=662
If you're looking for general WebKit issues, Safari 4 and Chrome use fairly similar builds of WebKit. Most issues can be troubleshooted in that manner.
For things like the automated tel://########## hyperlinking, though, you're likely SOL. That's an iPhone specific customisation of WebKit. It can be disabled (details in someone else's answer here) but you're not going to be able to test for the behaviour on Windows.
Another iphone webkit emulator :
http://www.genuitec.com/mobile/
Build by genuitec, the creators of myEclipse. It's better than using safari desktop as it's a modified version of webkit in order to have the same behavior than safari iPhone. But in reality, it's not 100% equal !
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/