具有完整网站按钮的移动网站

Question

I am looking for a way to do the following

1. If they are on a mobile device, it goes to -> m.domainname.com/
2. I want this expandable so that in the future, i can do -> m.domainname.com/iphone or /ipad etc.
3. I want there to be a bypass feature that will allow the user to bypass the mobile version of the website and go directly to the full version (even if they are on a smart phone).

I've seen this code in the past, but haven't been able to find it lately and want to make sure I'm doing this the best way possible.

Please give an example of the code or a place I can find the code/a tutorial on the code if possible.

If you see any other tags I didn't include this in that I should have, please add them.

Thanks

Answer 1

Points 1 and 2 have to be done by user-agent checks. It is relatively easy - if you're using a server-side language, you can easily look at the User-agent: header (note however that it can be spoofed!). You can find a full list at http://www.useragentstring.com/pages/useragentstring.php , sorted by browser. For instance, the Safari page has all the iPad user-agent versions.

Point 3 will be a refinement of point 1 - you need to cookie the user with their version.

So, in pure JS, that's going to be hard. Not impossible, but hard.

Answer 2

• You can find different ways to detect if it is a mobile device here http://detectmobilebrowsers.com/ . Their Javascript sample:

(function(a,b){if(/(android|bb\\d+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|symbian|treo|up.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-| )|g1 u|g560|gene|gf-5|g-mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| | |a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(n o|xi)|lg( g|/(k|l|u)|50|54|-[aw])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,' http://detectmobilebrowser.com/mobile ');

• As you can see you can change easily the url you want them to navigate to.
• A lot of sites use a simple dialog to ask the users if they want to use the normal website, or the mobile, you can do this as well. I am using jQuery Mobile for one of my sites, so I just use a normal dialog:

Good luck.