May 16, 2013

How to make a link appear as a normal link in one screen size, as a button in another?

Annoyingnewbie’s Question:

I’m programming a website with three different sizes for desktop, netbook and mobile phone systems.

On the main page I have a click-thru html link of the

<a href="more.html">Find out more</a> 


What I want is to change this to a button for mobile screens, like a conditional statement or something.

Any ideas?


Use media queries. They can help you target type of screen and based on its width. For example

@media only screen and (min-device-width: 300px) and (max-device-width: 480px) {

    /* Now you can write a different style of elements on a screen with maximum 300px as width */

   a {
      color: #f00; /* Make link appear red on mobile screen */

      /* make it should like a button */
      border: 1px #c00 solid;
      background: #ddd; 

Note: Media Queries are CSS3 features, and will not work in earlier version of IE.

October 6, 2012

How to deliver different Responsive Images?

Question by MEM

On this website:

  • .php

  • .jquery

  • .yii based

We need to have two or more different infographic pictures, depending on the viewport width.

  • The client is picky about w3c validation

  • picturefill solution doesn’t validate

  • different images and not only different image version, should be served

  • for a lot of reasons background images are not a solution*

  • IE8 and up support

I can use either a server or client side version, no problem.


  1. Background image technique does work, but those infographics are NOT background.

  2. They should arrive server side.

  3. Obviously, they need to adapt. (and background size… well…)

  4. Even worst, we do have responsive tooltips image maps associated with those infographics.

Answer by Starx

If media queries is not what you want then use response.js, if done properly you can load <img>s too. Here is a example:

<-- Load lo-fi.png  when viewport is 0–480px wide or no-js. 
    Load medium.png when viewport is 481–1024px wide. 
    Load hi-fi.png  when viewport is 1025px+ wide. --> 

<img src="lo-fi.png" data-src481="medium.png" data-src1025="hi-fi.png" alt="example" />
October 3, 2012

Rewrite rule in htaccess for mobile version

Question by Soumya Mohanan

I am using codeigniter framework for my site and I have done two site one for accessing through mobile and another for accessing through pcs. both are in same domain . My site url is like this http://mydomain.comAnd my mobile is I need to write htaccess rule which redirect to site url when i am accessing site from mobile and i need to rewrite to when i am accessing the site from pc.

How can i write rewrite rule in such case ,please help any help will be appreciated.

Answer by Starx

As scessor, said, it cannot be done with .htaccess. You need to analyse the browser’s user agent for this.

Check out this mobile detection in php.

Usage is as easy as this

if ($detect->isMobile()) {
July 12, 2012

table height in percentage not working

Question by user1483487

I am developing a mobile site and trying to use very simple markups.

Below is my code which is giving me problem :

<div class="abc">



.abc {height:some-dynamic-value-in-px}

.abc div {height:5%;}
.abc table {height:95%;}

Problem is this code worked on all the latest phones.But when I checked on sony ericson (500i)
the table height was coming out of the parent div abc and the UI was distorted.
I checked this site
and gave height {100%} to body but still no success.
Please let me know where I am going wrong.

Also, when I gave the height in px it worked for all handsets.But I want to know the reason why percentage was not working.


Answer by Starx

If you already know the height of the div, then its better to use fixed dimensions in px.

Try to avoid the complexity, if its not necessary.

And for some browsers, giving body { height: 100%; } might not be enough.

html, body { height: 100%; }

.abc { height:100%; }
.abc div { height:5%; }
.abc table { height:95%; }

Also, dont forget to include the DOCTYPE on your webpage.

March 22, 2012

How to synchronize all mobile devices accesing a web page?

Question by Jorge Ortega

It might use a cronjob in PHP. What I need is to display something at the same time, at a specific hour, in all devices that are accessing a determined url at that time (i.e. 12:00:00).

Answer by Starx

You might have to use SERVER TIME for this, since client time cannot be trusted. So, send a POST request to page, regularly to check for the time and get the output if the time is correct and then show.



setInterval(checkRegular, 60000);
function checkRegular() {
    $.post('check.php', function(data) {
         if(data.length) {
              //show the message


if($time==$requiredTime) {
   echo "the message";
March 20, 2012

Can I use jquery Mobile with HTML 4.01?

Question by pcharb

Can I use jQuery mobile library with HTML 4.01 transitional or do I have to use HTML5 to use it?

Answer by Starx

Yes, you can use both with jQuery Mobile. Just choose the one appropriate on your case.

For that you might need to know some of the differences among mobile technology regarding web and versions of different html.

I suggest reading these articles.

  1. HTML 4/5 Mobile Applications
  2. HTML 5 in mobile devices
  3. HTML 4.0 Guidelines for Mobile Access
November 29, 2010

What sort of page weight / size should I be aiming for when optimising for mobile?

Question by Simon Scarfe

I’m looking to optimise the mobile browser experience in a small webapp, using the awesome jQuery mobile to do so.

It goes without saying that a user doesn’t want to DL 200k of data, I’m just trying to draw the line between using external and internal URLs. Is there any existing guideline of what sort of page sizes / loading times I should be shooting for? I’d prefer to stick to internal URLs (keep the mobile interface effectively in one place from a maintenance point of view), but am weary of bogging the user down with lots of information that they have no intention of viewing.

Answer by galambalazs

One thing to note is that e.g. iPhone won’t cache components bigger than 25K.

Also consider minifing and gzipping your code. And @jfar got one thing right. HTTP requests can be a huge performance hit, so you may also want to reduce them as much as possible.

Answer by Starx

I would say try to lower your page as much to 100kb, because if u manage to do so loading different pages as per user request might be negligible.

However, loading the big pile of content at a time and using simple javascript show and hide, to display the content in almost realtime manner might impress the viewer too.


Please fill the form - I will response as fast as I can!