ok, i´m really frustrated right now.

 

everytime i accomplish something in the desktop "world", it wont work on mobiles.

 

Problem 1:

i have a background image, that scales nicely, keeping the right aspect ratio using background-size: cover.

works well, a little cpu consuming though. i made the menu, header, footer fixed in position and show all of the content in a div with height and width given (in percentage) and overflow auto.

 

first problem. on mobile browsers, there is no such thing as fixed positions and a scrolling funtion for overflow auto.

so that wont work.

 

ok, so i made the content div to scroll normal again and not the content itself, but then another problem appears.

the fullscreen background scrolls with all of the rest, even when put in a containing 100% div with fixed position.

 

(i did some research and added

 

<meta name="viewport" content="width=100%; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;"/>

 

fixed positioning works now with normal div elements, but that nasty 100% background still behaves unnormal. it scrolls with everthing else and then snaps back to where it should be (but that doensnt work most of the time).

 

i tried a js approach using jquery plugin backstretch. that solves the performance issue, but the background image still behaves like mentioned earlier.

 

2. Problem:

 

i made a fluid layout, so that the site scales with the resolution of the device shown on.

so far you could identify a mobile or tablet device by its lower resolution and then use media queries to adept the design.

newer tablets reach desktop resolutions, so you cant really use the above approach.

 

 

 

my questions are:

-how would you solve problem number 1?

-is there any reliable way to determine if its a touch device?

 

 

thank you so much!

Edited March 11, 201214 yr by Renaissance-Design
Please use the code button or tags to format your code.

Apparently there is Modernizr to sort the detection for you.

 

It's in this topic: http://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript