How to make a few webpages display different on mobile devices

Question

I have a webpage that is quite wide and short on about 3 pages, the pages that are wide and long display fine on a mobile phone browser, but the pages that are short show up on only less than half the screen.

Is there anyway I can make a seperate page for each of those 3 pages and have them come up only when someone is using a mobile phone.

Thanks

Answer 1

You need to insert some JavaScript that will sniff out the User Agent (web browser & version) on each page. Here is a link that explains how to do this:

http://www.quirksmode.org/js/detect.html

Once you have done that, then swap your CSS file for that page to the one appropriate for the device, or redirect to a special HTML page for that device.

Answer 2

如果您在Google中搜索“响应式设计”，则有很多关于如何使用同一页面的建议，但在移动设备上的显示方式却有所不同。

Answer 3

Along with " responsive design " you should investigate " media queries " which will allow you to adjust your CSS and help align the elements to the display size of each device viewing it. No javascript necessary.
How to use Media Queries in Mobile

Answer 4

Like others have stated. Responsive web design with Media Queries is best. Check out these sites.

http://www.alistapart.com/articles/responsive-web-design/ http://www.stuffandnonsense.co.uk/projects/320andup/