How can I see the source of a webpage as it would be displayed on an iPhone? - ios

I don't have an iphone, but I want to see what the HTML looks like to my users using an iphone.
Is there a way to emulate an iphone, so that flash does not appear ? For example if I visit YouTube, I don't want to see the Flash player in an emulator.
Thanks

Download Xcode for free if you have a mac and you can use the iphone simulator bundled with it. See this link on How to run iPhone emulator without opening Xcode

try safari browser. select Develop, User Agent, iPhone (or iPad or iPod Touch) from that menu.
if the Developp menu is not found then, Show Develop menu in menu bar in the Advanced Preferences

Related

How to close individual React Native emulator?

I'm running my app on a React Native emulator. I was originally emulating just the iPhone 6, and then added an iPhone 6 Plus emulator. When you add a second emulator it keeps the first one open. How do you close one of them while keeping the other open? Basically I want to de-select one of the emulators shown in the photo below:
Thanks!
Xcode device's emulator behaves like any other window, so you just have to Cmd+W on the one you want to close, it's like closing just one window of any other application.
And if you want to know more about Mac keyboard shortcuts, here's a link!

Display iPad screen as iPhone?

I have searched through the web and I did not get clues.
Is there a way to display iPad screen as an iPhone like this app does it?
The iPad displays an iPhone screen. Is there some configuration to display this behavior?
What you are seeing is the default behavior of running an iPhone-only app on an iPad. You don't have to do anything other than declare your iOS app as an iPhone-only app.
Of course it would be better for your users if your app properly worked on and took advantage of the iPad's screen but that's up to you.
If the supported devices, that appear under Project > Target > General Tab > Deployment Info
is selected to be "iPhone" and you run this version of app on an iPad, it will appear as the example you shared.

Testing Apple Smart App Banner on desktop browser

Is there any way of testing Apple Smart App Banners in a desktop browser by doing something along the line of spoofing the user agent, or is this functionality so specific to Mobile Safari that I can only test it on an iDevice?
I know that merely spoofing the user agent in a desktop browser doesn't do anything in regards to showing the Smart App Banner, but maybe I can do something else in my desktop Safari browser to test the banner?
I am not an iOS developer but I have access to the iOS emulator on my colleague's Mac if that helps.
Unfortunately, the Smart App Banner is only displayed on iOS Safari on a real device. The iOS Simulator and desktop Safari cannot display smart app banners.
This is a bummer, especially because resetting smart app banners after they have been dismissed is a huge pain.
In chrome dev tools, click the sprocket that lead you to the more advnaced settings, there check the 'override' check-box, and select a mobile user agent(IOS, Android).
Keep in mind that the screen sizes that chrome provide are not always accurate and might need some adjustment.
For more accurate screen sizes you might want to use Mozilla & Firebug(basically has the same functionality)
You can just tap the toggle device toolbar inside chrome inspector and the smart app banners are recognized since this toggle changes to a mobile user agent.
See sample result :

How to degub sass on iPhone with sencha touch

I have changed the sass file in sencha and compiled it
Cleared iPhone simulator, cleaned the project
Nothing helps, in the browser I can see that the new styles were applied, however in the iPhone simulator and iPhone itself they haven't
So basically this is the smallest changed I wanted to try:
from: .x-desktop .x-title .x-innerhtml{padding: 0;padding:0;color:fff;}
to: .x-desktop .x-title .x-innerhtml{padding: 0;padding:0;color:#52A5D6;}
So my question is:
Why could cause this issue? Solved: if you look at the first class it belongs to x-desktop...
How to debug the sass if the styles have been transferred to the devise and applied?
Thanks
You can use Safari's Web Inspector to inspect your application while running in the simulator, or while running on a connected iOS device. To do this, first open up Safari and go to Preferences -> Advanced, and check the "Show Develop menu in menu bar" checkbox.
After this, launch your application in either the simulator or a connected device, then bring Safari to focus. Click on the "Develop" menu, and then either "iPhone Simulator" or the name of your device. You will see the page listed in the next menu.
From here, after navigating to the page, you can use the Web Inspector to inspect the page like you would if it were in the webpage.

Preview icon design on iPhone/iPad (for amateurs)?

our company is having an app made and our app developer is providing this service in-kind. They asked for icon files which I need to prepare for them.
Is there anyway I can preview what the app icon will look like, directly on my iPhone/iPad? I have Adobe Creative Suite (for preparing the graphics), but don't have any iOs developer tools.
Thanks!
If you have a mac, you can download XCode for free and preview your icon with the simulator.
I have ecountered this a few times. And there are a number of ways to do this.
1) Create the icon in png format and upload it to the HTML directory of your webserver. Name the icon 'apple-touch-icon.png'. Point safari on your phone to the url and hit the 'share' button and click the "add to home screen" button. Safari will add that link as an icon to your homescreen and use the "apple-touch-icon.png" as the icon for the link.
2) LiveView Screen caster is a great app for previewing in semi-real time your screen designs on the device. http://www.zambetti.com/projects/liveview/ If you create the icon in the right dimensions and you can preview it on device that way. (My mistake, I actually thought there was a PC version of liveView, but appears there isn't)
Try this iOS App, works great. It connects to your Photoshop, mirrors Photoshop's canvas onto your iOS device.
http://itunes.apple.com/us/app/photoshop-display/id489161163
I'd just send my icon files (pngs for example) to my iPad via e-mail or Dropbox. :)
I made a tool that lets you upload an icon and it will text you a link that you can add to your home screen and preview the icon.
https://fredandrandall.com/iconpreview

Resources