Masahiko Sunami

Tag Archives: device-width

Responsive Web Design: Designing a Website for Mobile Devices

Designing for Mobile Devices

I created a post a while ago, that captures user agent string to determine device width, height and aspect ratio of different mobile devices. The idea was to get a sense of those specs to assist me in making my site responsive to mobile devices. You can see if you access this site from a mobile device, or adjust your browser window size if you are on a computer, that my site layout changes to accommodate different screen sizes. Responsive web design is a big thing now, that more and more people are accessing the web using mobile devices, every website should be optimized to accommodate smaller screen size, even if it’s a fixed width design. So here are my notes on how to go about it.

1. Viewport meta tag in HTML header

Viewport is basically an effective screen size for a mobile device. By using a special meta tag in ...

Continue reading »

List of Mobile Device User Agents, Screen Sizes, and Pixel Aspect Ratio


Warning: Missing argument 2 for wpdb::prepare(), called in /home4/mas/public_html/wp-content/themes/bbm/functions.php on line 598 and defined in /home4/mas/public_html/wp-includes/wp-db.php on line 1292

In an effort to get a sense of device width, height, and pixel aspect ratio of various mobile devices out there, I decided to spend a day wrestling with JavaScript and PHP to create a page that records visitor’s user agent and device information. It took some doing, but I ended up with this page, which records your User Agent, Device Width, Device Height, Pixel Aspect Ratio, and Device Orientation if same spec doesn’t already exist in the database. Your device information and table of collected data are displayed below.

I am separating the list of mobile devices from PC’s by seeing if device orientation is defined or not. (Orientation is 0 for portrait, 90/-90 for landscape,  or “undefined”.) You should be able to get a sense of what each devices are, by looking at user agents (iPhone, iPad, Android, etc…), but same device with different OS versions will also record ...

Continue reading »