0

I am currently working on a new responsive website with several breakpoints. Between those breakpoints the layout should be flexible to always display as nice as possible on every device.

If a user views the page with a classic desktop browser i want to force the desktop version of the page and prevent the responsiveness.

Reason why is the lack of responsive ads which currently exist in germany.

Anyone has a clue for me how to achieve it?

fraaalk
  • 1
  • 1
  • 2

2 Answers2

1

You should use max-device-width rather than max-width, which targets the viewport size rather than the device screen size.

@media only screen and (min-device-width : 1024px) {
   /* Styles */
}

You can also target retina displays:

@media only screen and (min-device-pixel-ratio : 1.5) {
   /* Styles */
}

Edit: See this SO thread for more info.

Community
  • 1
  • 1
blend
  • 640
  • 4
  • 6
0

Start by having two stylesheets. One responsive and one non-responsive. If it's a desktop user then load the non responsive and vise versa for mobile users

<link rel="stylesheet" media="only screen and (max-width: 400px)" href="mobile.css" />
<link rel="stylesheet" media="only screen and (min-width: 401px)" href="desktop.css" />
Kevin Lynch
  • 22,799
  • 2
  • 32
  • 37
  • this does not solve the issue properly. imagine a user with a desktop browser coming to the page with the window resized to 350px. the media query above will make the client load the wrong stylesheet – fraaalk Jun 11 '13 at 08:09