iPad - display desktop version of website
- Started
- Last post
- 15 Responses
- fadein11
Long story but I have built a responsive website from a complex design by someone else.
The client would like to display the desktop version of the site on iPad landscape view.
Is this possible?
I have done some looking around but I don't think it is.
It will save a whole lot of work if iPad landscape can just default to the desktop view - zoomed out to show the whole site.
Do I need to write some Javascript to enable this?
Thanks for any help.
- rabbit2
https://css-tricks.com/snippets/…
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {}
- whatever rules run your desktop, add thisrabbit
- basically, below 1024px, shows mobile version...yea?rabbit
- and then, just get gay with itrabbit
- hah, good luck.kingsteven
- fadein110
Thanks for that - but thats just targeting iPad landscape to add specific CSS for that device no?
I am more interested in just making that view default to the desktop version (above 1024 view).
Thanks.- it really depends on a lot of things including your viewport meta tags how best to go about it (thinking about orientation change etc.)kingsteven
- but, if it's delivering an entirely different site to mobile regardless of orientation i'd say it mightn't be a css solution...kingsteven
- find out how it's switching the stylesheets and see if you can add a clause for orientation...kingsteven
- yuekit0
You can dynamically set the viewport using JavaScript
http://stackoverflow.com/questio…
Something like this maybe:
<meta name="viewport" content="width=device-width, user-scalable=no" />
<script>
if(navigator.userAgent.match(/iP... {
document.write('<meta name="viewport" content="width=1024">');
}
</script>
- rabbit0
Again, totally possible:
http://responsive.is/typecast.co…
Use the top icons to change the device view, a preview if you like.
Most sites I have built are desktop/tablet landscape same view.
As 1024px wide is the generic width for layout.
Easy.
- did you read the OP? it's not his site, sounds like it uses js (or server sniffing) to switch the css. and he's looking for an easy fix.kingsteven
- oh, right it is his site... TAXI!kingsteven
- ^ this.fadein11
- I am building someone else's design so not really my site and thats where the problem is - the menus are not easy to make smaller for smaller viewsfadein11
- fadein110
^ problem I have is the menus do not fit (with the design provided) at iPad landscape width. A long story but I cannot easily shirnk them down with CSS and they have graphical elements and subtitles... Bit of a nightmare as the menus were not designed with responsiveness in mind and I don't want to make the responsive menu appear at such a big width.
I agree with what you say Rabbit as I do the same on most sites - 1024 / desktop view the same.
But in this instance that won't work.
I just need a script that tells iPads in landscape view to display the full width site (so essentially zooming out the viewport).
Does that make sense?- and I know this isn't best practice or the right way of doing things.fadein11
- well find the media query/breakpoint that changes it to responsive view for tab landscape, and change it by 1px? maybe?rabbit
- in this a user agent detect might be best as per above 3 posts yuekitrabbit
- case*rabbit
- but i would try with media queries and look for your current breakpoints first.rabbit
- fadein110
@yuekit - your solution seems the best thanks.
Can you expland a little please?
That article is slightly different to what I want to achieve.
I need to target just iPad landscape - how would I do that?
Thanks.
- rabbit0
Is the site online?
- kingsteven0
yeah, you can modify your meta viewport tag to be fixed at 1024 with javascript but (apart from being frowned upon) you're going to run in to problems with dodgy implementations of onorientationchange. really, more hassle than it's worth in the long run.
if you remove the viewport meta tags entirely most devices will default to 980px on landscape and mobile (if that fits your menus) you may be able to build your css from there based on screen width and orientation...
- kingsteven0
FYI: i've been using enquire.js to handle mediaqueries with javascript... may be useful:
- fadein110
Okay - it seems like it was an odd request - clearly not the way of doing things. But thanks for all your help people.
Would be v.useful to have conditional viewport script though - that basically just says ignore all css media queries if such and such device... hmmm. amazed someone hasn't had to do this before.
- monospaced0
Does it also need to target better tablets in landscape mode (Microsoft, Samsung), or just the iPads?
- Yep and need a media query to ignore Apple watch as such a massive flop lolfadein11
- but yes see your point.fadein11
- Apple watch doesn't have a browser and it's also the most successful smart watch to date. Funny thomonospaced
- no browser but sends heartbeats to loved ones - ahhhhhfadein11
- Which everyone has already copied. So what? You act as if that's all it does lol.monospaced
- Btw you know my stance already is that smart watches are all pretty stupid at the moment.monospaced
- I know. Relax. Just messing about.fadein11
- fadein110
Me again...
Search and searched but to no avail.
Can anyone help me with a bit of javascript please?I need:
if iPad landscape
make viewport scale site to 100% - full width desktop version of site
else
use responsive CSS.This has really stumped me...
If anyone can help with this I will give you a treat.
- yuekit0
Maybe this helps:
http://kaspars.net/blog/web-deve…
I haven't tried it myself so not sure how well this works in practice. But the basic idea is that you would detect user agent + screen size and set the viewport accordingly. Then have another function that runs when switching from portrait to landscape.
- I agree it's surprising there isn't a good plugin out there for thisyuekit
- fadein110
YES! - thanks - this is basically exactly what I am after - will give it a go.
Thanks so much!
- fadein110
Alas - that didn't work.
In the end I just gave in and set the responsive menu to appear on iPad landscape... bit of a copout really but heyho.
Thanks for all the help.- what'd you end up using? late on the scene but responsinator.com?bklyndroobeki