Posts tagged Safari Mobile
How to easily debug websites on mobile devices with “Weinre”
Aug 5th
If you do web development, chances are you sometimes need to fix something on the website adapted to mobile devices such as iPhone and Android.
Debugging websites in a browser on a computer is easy with all the good tools available, such as Firebug in Firefox, Webkit inspector in Chrome and Dragonfly in Opera. But mobile devices doesn’t have any such tool. What do you do then?
That was my problem the other day, a div element on the website rendered for iPhone got the wrong styles, so I had to investigate…
Which was not easily done from the iPhone Safari browser, to say atleast.
(And the solution was not as easy as just browsing the mobile website on my computer with iOS user agent.)
A buddy of mine had just recently come over a tool called weinre. Funny name, yes, but a very handy tool to debug websites on mobile devices!
About Weinre
- Weinre stands for “Web Inspector Remote” and is similar to the web inspector in chrome.
- It will allow you to use the inspector (run on your computer), on the website rendered on your mobile device!
- Changes you do in the inspector, are reflected instantly in the mobile devices browser. (such as changing text, color, dimension etc) just as in FireBug.
- You also get a javascript command line.
- Weinre is a simple jar file, you run through the command line.
It has a lot of documentation on its website, maybe too much, so I thought I would try to cook it down to a few simple steps to get up and running quickly.
How to use fixed positioning on iPhone (Safari Mobile) with javascript
Feb 22nd
When creating websites for Safari Mobile (iPhone, iPod touch etc) you will probably notice that
position: fixed;
does not work as it is supposed to.
Quite irritating, but it has to do with the way iPhone renders the website, when you scroll on a website, you are actually just panning around on a big static webpage.
If you want to create a fixed element, be it an image, div, text or whatever, on your website, you can use this javascript code as a workaround:
window.onscroll = function() {
document.getElementById('elementID').style.top =
(window.pageYOffset + window.innerHeight - elementHeight) + 'px';
};