How I can make mobile version of my website which will work in android , iphone,ipad?

Question

I want to replicate a site for it's mobile version. The site have slider , simply header,footer and dropdown.

Are we able to make exact thing for mobile ( in my case I am talking about slider and drop-down made in jQuery).

What I want is make same feeling on mobile as we have for normal site. Like I see in Video example as people shown (demonstrate) for ipad,iphone that click on menu and page slide to right and something show as new page. I don't want this.

I want to choose the existing themes and color-scheme in mobile edition.

How I can do it.

Answer 1

for this we have something called as Responsive Web Design :)

you can have a look at here :

http://www.netmagazine.com/tutorials/build-responsive-site-week-designing-responsively-part-1

Answer 2

另一个不错的起点： http : //html5boilerplate.com/

Answer 3

This topic is much more complicated than simply adding a few lines of code, but here's what I can offer:

If you want separate mobile and desktop (which I would suggest against) you're going to have to do some device sniffing. The easiest way would probably be to check screen size and redirect if it's under 320px or whatever size you decide on.

This will make your page load a little slower, because you're going to have to wait for the page to parse the screen size detecting script, check to see if their screen is too small, and then redirect. That's going to take a long time on a mobile device and you're not going to make any fans because of slow load time.

Responsive design is the best solution. I think you should take a step back and consider why you want your site to split into two different sites and if you are going to have the ability to constantly maintain both.

Answer 4

You need to use media-queries http://www.w3.org/TR/css3-mediaqueries/

with media queries u can set styles for misc devices and save mutual html...

Answer 5

您可以使用DDR来根据特定的移动设备定制内容，而不是采用响应式设计： http : //wurfl.sourceforge.net