Google Chrome has very useful utility into the native “web developer toolbar” to test mobile devices. Just press Settings in the bottom right corner of the toolbar then click on Overrides tab to view all the options.
Tag Archives: Mobile
My New Own WordPress Theme!
After almost a year since this blog exists I finally created my theme for WordPress. I worked very hard since the design of templates is not my specialty. Taking a cue from my old theme, LightWord, I began the creation of my own and now it’s finally online.
Detect Mobile – Javascript
If you need to detect the if your website’s visitor use a mobile device you can do it with Javascript.
Mobile-Detect – PHP Class
Mobile_Detect is a lightweight PHP class for detecting mobile devices. It uses the user-agent string combined with specific HTTP headers to detect the mobile environment.
This class can be used to detect the different devices with simple methods easy to remember.
jQuery Touchwipe Plugin – iPhone, iPad, Android Wipe Effect
Touchwipe is a jQuery Plugin that allows you to obtain the wipe event on an iPhone, iPad or iPod Touch which can be used for example to scroll through an image gallery. Should also work with Android touchscreens. It’s very small, it’s only 1 KB.
Example
$("#target").touchwipe({
wipeLeft: function() { alert("left"); },
wipeRight: function() { alert("right"); },
wipeUp: function() { alert("up"); },
wipeDown: function() { alert("down"); }
});
jQuery Touchwipe Plugin (iPhone, iPad, iPod Touch Gesten / Gestures, Wischeffekt / Wipe Effect)
Scrolling in IOS 5
The CSS property “overflow” lets you made scrollable the content inside an element. It adds the native OS’s scrollbar in almost all browsers except with IOS.
To do it you just need to use these two simple lines:
Tips for Making Website iPhone and iPad Frendly
In the latest days I worked on websites optimizations for iPhone and iPad. I found some tips that can be useful and I want to share it.
PHP detecting
You can detect if the device viewing your site is an iPad, iPhone or iPod using this code:
What is Responsive Web Design
“Responsive Web Design (RWD) essentially indicates that a web site is crafted to use W3C CSS3 media queries with fluid proportion-based grids, to adapt the layout to the viewing environment, and probably also flexible images. As a result, users across a broad range of devices and browsers will have access to a single source of content, laid out so as to be easy to read and navigate with a minimum of resizing, panning and scrolling.”
Wikipedia.org – Responsive Web Design