Quick Start
Mobify.js is a JavaScript framework for adapting websites for tablet and mobile.
-
Install Node.js if you don’t have it already.
-
Download the Mobify Client:
sudo npm -g install mobify-client -
Create a project scaffold and start the Mobify.js development server:
mobify init myproject cd myproject mobify preview
Install the Mobify.js Tag
Insert the Mobify.js tag immediately after the opening <head> tag on the website you want to adapt:
<script>
(function(window, document, mjs) {
window.Mobify = {points: [+new Date], tagVersion: [1, 0]};
var isMobile = /ip(hone|od|ad)|android|blackberry.*applewebkit|bb1\d.*mobile/i.test(navigator.userAgent);
var optedOut = /mobify-path=($|;)/.test(document.cookie);
if (!isMobile || optedOut) {
return;
}
document.write('<plaintext style="display:none">');
setTimeout(function() {
var mobifyjs = document.createElement('script');
var script = document.getElementsByTagName('script')[0];
mobifyjs.src = mjs;
script.parentNode.insertBefore(mobifyjs, script);
});
})(this, document, 'http://127.0.0.1:8080/mobify.js');
</script>
Preview your mobile site
-
Set your browser’s User Agent to “iPhone”:
- In Chrome, open Webkit Inspector, click the gear in the bottom right, then the “User agent” tab. Check “Override User Agent” then select “iPhone” from the dropdown.
- In Safari click “Develop” > “User Agent” > “iPhone”
- In Firefox download the User Agent Switcher extension.
-
Navigate to your page. If the demo gods are kind, you’ll see this:
How it works:
Mobify.js uses a technique called client side adaptation to remix HTML in the browser. The remixed content is interpreted by the browser as if the server had sent it in the first place!
The Mobify.js tag bootstraps the adaptation and loads the Mobify.js file, which performs it. The tag activates in iOS, Android and BlackBerry browsers. By default, the Mobify.js file is loaded from the development server.
The development server is part of the Mobify Client, a command line tool for building Mobify.js projects. It compiles the Mobify.js file dynamically per request. The file contains two parts, the Mobify.js API and site specific adaptations.
Adaptations are expressed as a series of operations on the source DOM, the DOM constructed from the page’s original HTML. HTML Elements can be selected, then rendered with a template. Finally, the rendered template is written to the browser.