Development Blog, jQuery
Debugging HTML / CSS layout on an iPad
In creating a new store locator for Dairy Queen, my layouts were working well on all the supported browsers. On iPad, the layout works 99% but had some pixel discrepancies on a couple of elements. I found this article by Lorenzo Orlando Caum on debugging layouts in with FireBug Lite very helpful:
http://iosbookmarklets.com/tutorials/firebug-lite-bookmarklet-ipad/
Definitely check out the article for more details. The summation:
- Go to Safari and create a new bookmark of any page (this will be a placeholder)
- Go to Bookmarks and edit the new bookmark – rename it to FireBug Lite (or whatever you’d like)
- In the Address field, paste the following JavaScript:
javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');
When you’re ready to use FireBug, click on that bookmark after the page has loaded and you’re ready to go. Pretty nifty!
About Author
Comments are closed