Solved

change webpage

Posted on 2013-05-17
9
227 Views
Last Modified: 2013-05-19
Hi,

I am sure I have asked this before but I cant find the post.

Say someone has a webpage designed for desktops and decides they want the webpage to work properly  for mobile devices. They want the desktop webpage to be left alone.

What is the script or method to detect a mobile webpage and load a new html/css for tablet/phone size . users will go to the same webpage as the desktop location and be redirected to a mobile version if need be.

This avoids the headache of making a static desktop webpage responsive.
0
Comment
Question by:jagguy
  • 2
  • 2
  • 2
  • +2
9 Comments
 
LVL 23

Expert Comment

by:tailoreddigital
ID: 39176644
0
 

Author Comment

by:jagguy
ID: 39176650
No I dont mean tools to convert I mean a script or something to detect if a table/phone is being used.
I will code using html/css for mobile devices and the desktop website is left alone. There has to be something to redirect to either device.
0
 
LVL 20

Expert Comment

by:n2fc
ID: 39176671
See:
http://stackoverflow.com/questions/6666907/how-to-detect-a-mobile-device-with-javascript

for java code to detect the device & change the html...
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39176672
Every system to do this has it's flaws and detecting android phone vs tablet is not easy. That is why media queries are the way to go but I understand the learning curve.  

Check out this site to get the script you want in just about any language http://detectmobilebrowsers.com/
0
 
LVL 23

Expert Comment

by:tailoreddigital
ID: 39176674
0
 

Author Comment

by:jagguy
ID: 39176696
I like media queries and this is simple enough. I will code for different size mobile devices with this. Responsive layout is not simple for images on screen and in lists. There are quirks like margin in % and px changes the inline flow.

There is no point changing a desktop webpage if someone doesnt want it changed. I am working around it but not avoiding media queries

I like this solution script but this would mean placing this code in the home page of the desktop website would it? for example the asp.net solution uses server side script

http://detectmobilebrowsers.com/
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39176727
One of my customers whose HTML skills normally date from 1999 found that Dreamweaver CS6 has this built in and almost magically created a 'mobile' version of his site in less than a week.  I was impressed.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39176735
That site gives you both serverside and javascript options.    There is going to be a learning curve no matter what you do. I think for small sites responsive seems to be the way to go.  You just need to watch you are not loading too much up at once if using dynamic pages.  For seo the advantage is you are not servering duplicate content.    

When you make a completely different mobile site then desktop, you need to make sure you are not showing google the same content (textual content).  You will just need to be smart about this.  There are gotcha's either way weather you stumble directly on it or not.

However, either choice is a lot easier then creating native mobile.

Also watch that "mobile" has both a small phone and larger tablet.  I think the useragent for android is not easy to distinguish between the two and this is another reason I like responsive.

Good luck.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39176754
For 'detection', I just used javascript to redirect browsers with a screen size of 480 or less in either dimension.  The original site worked fine or at least ok in screens larger than that.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to add a stringified JSON string to an IP address? 11 61
Responsive Font Size 6 30
CSS DIV Height in Percent 1 9
Clear input text 15 8
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question