There are several websites that offer an "iPhone browser emulator". I'm just wondering if there's a way for me to get the same functionality for viewing local html files on my machine.
It seems like basically you would mainly just have to spoof the css "media type". Is that possible using HTML/JS/CSS?
And is there anything other functionality I'm forgetting that would be required for a basic iPhone browser simulator? Obviously discounting all the mobile-only hardware like deviceorientation and gps etc.
You don't need a third party website! you can easily do that with Chrome browser:
F12 to open the developer tools panel
click the setting gear in the bottom right corner
in the left panel select Overrides
"check" the Enable checkbox
select the desired User Agent
you might want to change the Device metrics / orientation and enable touch events
I'm using ripple. Developed by blackberry.
It's a chrome extension. And you can work with your localfiles
Related
i wanted to build a custom browser install that would fit the following specs, i found ways to do it using enterprise deployement, but my intent is to distribute it to friends and family without having to go through the enterprise distribution.
Can be sourced from Firefox or Chromium (or even other as webkit)
Should be easy to customize (ideally no C++ coding)
Should be able to embed extension or hard code the extension within the browser. (i've coded a custom adblock that is lighter and faster than the ones on FF or Chrome store and would also like to embed TOR connection extension)
Remove the ability to install other extensions (i want to ensure this browser cannot be victim of bloatware extensions installs)
Customize UI
Protect the browser against Search engine / HP / New tab settings change.
If you could point me to the right direction it would be awesome and i'll make sure to share this browser's link here once done.
I just saw this in the corner of my eye and figured I'd share this question/answer to possibly help you:
Standard way to build a Chrome extension into Chromium
I would like to use apple-mobile-web-app-capable to allow a user to browse a website like a kiosk, without the navigation bar and the page fullscreen.
This works well until a link is clicked, then it opens Safari.
Is there any way to use this fullscreen mode and allow clicking of links without being taken to Safari?
I asked a similar question over on AskDifferent - Hiding URL Bar on iPad.
The answer I received there suggested distributing the web app's configuration file, which allows you to configure many more options. The end-user must agree to the profile installation, but having a controlled device will limit any frustration with this fact. The details of this were linked to in the above answer, but it appears to be broken now.
Alternatively, Chrome has a full screen browser mode that can be taken advantage of. Given a controlled device you could simply use the alternative browser.
I followed the approach mentioned in how to emulate a mobile (android) browser on desktop
to project the mobile webpage's properties on desktop chrome browser. I was successfully able to do that but now I have some queries as mentioned below, please let me know your inputs on that
a) How to use the "Select element option" of chrome developer toolbar to view an element's property for a mobile webpage. In normal desktop chrome browser we have the web page displayed and below that the developer toolbar is displayed and we can easily spot the element using a pointer but with mobile webpage displayed on desktop chrome browser i am not able to use this option as the webpage is not displayed.
b) I tried to copy the xpath and other things from the displayed HTML (HTML of mobile webpage on desktop chrome browser) but it gave me an error that "You need to install a Chrome extension that grants clipboard access to Developer tools". I installed one such extension named: "Auto Copy" but then also I was not able to copy. Please let me know how to go about it.
Thanks a lot in advance,
Namit
For (B) – Judging from the discussion when that message was introduced, it sounds like you need to roll your own simple custom extension to enable clipboard access. Here's a sample manifest.json – I haven't tested it out myself, but it looks pretty straightforward. The extension development Getting Started guide explains how to turn a file like this into a working extension and install it locally.
I've got site that is correctly displayed on desktop version but has few bugs on iPad. What's the simplest way to detect problems if my OS is Windows?
Option 1 - Free, local machine debugging
You may use Safari browser for Windows (download Safari 5.1.7).
Steps
Enabling Develop menu in menu bar (Press 'Alt' key to open menu bar. Then follow to Edit menu > Preferences > Advanced tab. Find this option at the bottom.)
Then, follow through Develop menu > User Agent. Select iPad, iPhone etc.
There are more options in the Develop menu (e.g. Show Web Inspector) to help with your JavaScript etc debugging.
Credits to How to debug iPhone and iPad web applications, using Safari.
Option 2 - Paid, browser-based access to target browser/OS/machine
I've personally used http://www.browserstack.com/ and it lets you test the functionality on a wide combination. However debugging may not be as convenient here as it would be on a local machine.
There may be more companies providing similar services.
Beware of basic online emulators
As mentioned in a comment, be wary of 'emulator' websites. Example: A website I ran into claimed to emulate iPhone, with a picture of iPhone, and inside it was an iframe, being dutifully rendered by the browser I opened that website in (Firefox).
The best way I can think of(depending of your implementation) is to use the firefox plugin
https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/
It allows you to switch to all sort of devices and see how they would appear on another device.
Here http://www.ampercent.com/test-website-design-iphone-ipad-mobile-devices/7075/ is a quick guide on getting you started.
There are also user-agent switchers for other browsers than FF like Chrome. Do a google search and try for yourself which one you like.
For the last few years I have been using Firefox, Firebug, and the Web Devevloper Firefox toolbar for all my web dev needs, quite happily. I am, however, very interested in experimenting with moving my web dev support over to Chrome, but I have no idea where or how to start. How much functionality is build into Chrome and how do I access it? What add-ins do I need and where do I learn about using them?
These are two of many questions I think face most web devs moving into a much less familiar environment. I'm trying to ask a broader question here, along the lines of, what do I need to use and know for effective web deb and JavaScript debugging in Chrome and where is best to learn what I need to?
Google Chrome (as well as Safari) has really underestimated Developer Tools feature. Lots of developers are indifferent to it and use Firebug through habit. (to no purpose!)
But for me it is the main debug tool: it looks more pleasant than the latter and includes a way cooler features. (e.g. Timeline — separate time intervals for Loading, Scripting and Rendering).
Developer Tools Tutorial.
Can't give up with Firebug? Have a look — Firebug Lite.
More tools.
→ Webmaster tools;
→ Speedtracer;
→ Page Speed.
→ From google webmasters-faq:
There are several tools to help you test your website in Google Chrome:
Web Inspector
Right-click on any component on a web page to launch the web inspector. You'll be able to see the elements and resources associated with the component on which you clicked, including a hierarchy view of the DOM and a JavaScript console.
Task Manager
Select the Page menu icon, then Developer > Task Manager (or press Shift+Esc). The task manager shows all running Google Chrome processes, and the resources that they're using (memory, CPU, and network).
JavaScript Debugger
Select the Page menu icon, then Developer > Debug JavaScript. This launches a JavaScript debugger that can be used to attach to existing processes.
in chrome: right click and "Inspect Element"
the Light Version of Firebug is available too.
While in Chrome, press Ctrl+Shift+I and start experimenting. It's all you'll need.
The Web Developer port from Firefox is very handy.