{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 傲 的问题《Scale down Mobile Safari viewport width when iPad》','https://www.manongdao.com/q-1311879.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I am working on a website which is designed to work best when viewed in landscape mode on iPad. Everything is in a 1024px wide <div> container. However, I am still required to scale down the viewport so when the user turns the iPad into portrait orientation, the user does not have to zoom out or scroll horizontally to see everything on the page.
Currently I have this <meta> tag in my <head>:
<meta name="viewport" content="width=1024px, initial-scale=1.0, maximum-scale=10.0" />
Everything displays fine when the page is viewed in landscape mode, but I can't get the abovementioned required portrait behavior to work. I tried changing the initial-scale to 0.75, and the exact opposite happens: everything fits in portrait mode, but there's extra horizontal space when iPad is in landscape mode.
Is there any CSS, Javascript or special viewport setting I can use to get this to work?
P.S. I cannot use user-scalable=no.
You may be able to use orientation specific CSS like this:
In that case you will likely have to set the viewports setting to the devices max width and take care of the actual width of the content using CSS. For example, wrap everything in a div with the appropriate width for each orientation, 1024px or 768px (minus the status bar and browser chrome is neccessary).
You can even add the orientation properties within the same CSS that you use for desktop browsers...Just need to add the following;
Again remember for iPad, device-width is always 768px irrespective of the orientation...I know it's confusing, but that's the way it is...
You can also check out a very good tutorial on the same at http://itunes.apple.com/in/app/designmobileweb/id486198804?mt=8