1

Maybe my question will be somehow odd but my client wants to remove responsiveness for some time from the site, and see desktop version in mobile.

First I've removed responsive meta tag, but get horizontal scrolls in page. What I want is to see my website on iPhone as I see it in desktop, without any scrolls or zoom.

I use bootstrap 3 and my container has min-width:1220px, if this will help.

Update: The problem is from table, when I remove table from the page, the website view is rendered as in desktop (with smaller text, etc). And this problem occurs only on iPhone.

halfer
  • 19,824
  • 17
  • 99
  • 186
FrontDev
  • 837
  • 5
  • 19
  • Try removing `` – Lal Mar 14 '15 at 17:16
  • I've removed it firstly, this show it as in desktop but with horizontal scrolls – FrontDev Mar 14 '15 at 17:18
  • Then my suggestion is that you give all the widths,margins,paddings etc in %.. – Lal Mar 14 '15 at 17:19
  • this will not be the same as in desktop, I just want to see it somehow like zoom out, something like small view of desktop – FrontDev Mar 14 '15 at 17:23
  • yes it will be...it will look same in both desktop as well as in mobile devices.. – Lal Mar 14 '15 at 17:24
  • I tables in the page,even if when I use table-layout:fixed, the data is collapsed, so this is not what I want. I just needed the whole page to be zoomed out, This is done for other pages and it works – FrontDev Mar 14 '15 at 17:49

1 Answers1

1

You'll need to setup the viewport to be the width you want it to display in mobile. For you, with your min-width value, you'll want something like this:

<meta name="viewport" content="width=1220">

Note that the content width changed from device-width to your width value. This will allow the scaling you want. Otherwise, the browser will try to assume some defaults and it will be too small for your site. Specifically, it will try 920px wide, which is why you get a horizontal scroll.

LoveAndCoding
  • 7,857
  • 2
  • 31
  • 55
  • don't help :( this has the same result as with css, also the problem is only in iphone, on abdroid devices all is ok with my code – FrontDev Mar 14 '15 at 21:12
  • Do you have an example url or a fiddle or something to take a look at? Because likely if this doesn't help it means there is something in your CSS or code that is throwing off the viewport rendering – LoveAndCoding Mar 14 '15 at 21:21
  • @FrontDev I don't see the modified meta viewport code on that page. Did you already remove it? – LoveAndCoding Mar 14 '15 at 21:28
  • @FrontDev Ah, sorry, that was my bad. Remove the `, initial-scale=1`. That was a copy/paste error. That should get you fully zoomed out – LoveAndCoding Mar 14 '15 at 21:34
  • you rock man!!! thanks a lot, have worked on this full 4 hours, you solved this in 15 min!!!! :**** – FrontDev Mar 14 '15 at 21:48
  • Is there a way to use this for print too? when I try to print it cut the page. I want this to be rendered in print too. – FrontDev Mar 15 '15 at 17:17
  • @FrontDev Printing is a different sort of beast. I might ask a new question for that, but the only way I can think of is using `@media` queries for it. – LoveAndCoding Mar 15 '15 at 17:34
  • Thanks have asked already here http://stackoverflow.com/questions/29063886/print-meta-for-print-page – FrontDev Mar 15 '15 at 17:35