iPhone viewport blown out in mojoPortal?

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
7/11/2011 2:52:56 PM
TRIAD - Next Level
Gravatar
Total Posts 17
View Posts

iPhone viewport blown out in mojoPortal?

I am currently using the mobile skin redirect in web.config (works great!) but am having issues with the scaling of the page.

I'm very familiar with the iPhone specific viewport meta tags and their many capabilities, but regardless of my setup, it seems like mojoPortal automatically scales the page to a width of apx. 710 pixels.

I'd like to ultimately use the strict device-width and have the page render nicely in landscape mode (which it currently does not... horizontal scroll bars appear even though there is NO content to the right)

Am I overlooking something obvious? Any help would be greatly appreciated... thanks!

7/11/2011 3:15:21 PM
TRIAD - Next Level
Gravatar
Total Posts 17
View Posts

Re: iPhone viewport blown out in mojoPortal?

For reference:

Here is the URL that redirects to a mobile skin: http://98.103.40.104/

Notice that even though the header image is only 320 pixels wide, it only spans about 45% of the page.

This same viewport/image setup works well on a non-mojo (static html) page. Here's an example:

http://98.103.40.104/data/sites/1/mobile/

If viewed on an iPhone or iPod, you'll see the big difference when you rotate to landscape mode...

7/12/2011 7:48:35 AM
Joe Audette
Gravatar
Total Posts 18439
View Posts

Re: iPhone viewport blown out in mojoPortal?

Hi,

Looks to me like you have two viewport meta settings in the mojoPortal skin and the lower one is overriding the upper one.

FYI, you will probably be interested in todays very big announcement about Going Mobile with mojoPortal.

Best,

Joe

 

 

7/12/2011 9:17:24 AM
TRIAD - Next Level
Gravatar
Total Posts 17
View Posts

Re: iPhone viewport blown out in mojoPortal?

Mobile Kit Pro! Great news! Congrats and thanks for the release... this is definitely something that we will be purchasing ASAP. The community owes you a million beers for this one!

As far as the "two viewport meta tags" in my current mobile skin... I'm only seeing one in my source code. I've pasted in the HEAD section for reference. What are your thoughts? Thanks again for the help!

<head id="ctl01_Head1"><title>
Home - TRIAD Communications, Inc.
</title><meta name="viewport" content="width=device-width" />
<link rel='stylesheet' type='text/css' href='<a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/smoothness/jquery.ui.all.css" moz-do-not-send="true">http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/smoothness/jquery.ui.all.css' />
<link rel='stylesheet'  type='text/css' href='/csshandler.ashx?skin=triad-mobile&amp;s=1&amp;v=2.3.6.5' />
<!--[if IE]>
<script defer="defer" src="/ClientScript/html5.js" type="text/javascript"></script>

<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" href="/Data/Sites/1/skins/triad-main/IESpecific.css?cb=ff2e49fc-18c2-4d68-b854-f0e68c2a326f" type="text/css" id="IE6CSS" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="/Data/Sites/1/skins/triad-main/IE7Specific.css?cb=ff2e49fc-18c2-4d68-b854-f0e68c2a326f" type="text/css" id="IE7CSS" />
<![endif]-->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="search" type="application/opensearchdescription+xml" title="TRIAD Communications, Inc. Site Search" href="<a href="http://98.103.40.104/SearchEngineInfo.ashx" moz-do-not-send="true">http://98.103.40.104/SearchEngineInfo.ashx" />
<!--[if IE]>
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0)" /><meta http-equiv="Page-Exit" content="blendTrans(Duration=0)" />
<![endif]-->

<link rel='shortcut icon' href='/Data/Sites/1/skins/triad-main/favicon.ico' />
<script src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" moz-do-not-send="true">http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript" ></script>
<script src="<a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js" moz-do-not-send="true">http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js" type="text/javascript" ></script>
<link rel='canonical' href='<a href="http://98.103.40.104/home.aspx" moz-do-not-send="true">http://98.103.40.104/home.aspx' /></head>

 

7/12/2011 9:32:36 AM
Joe Audette
Gravatar
Total Posts 18439
View Posts

Re: iPhone viewport blown out in mojoPortal?

When I viewed the source of your page this morning I saw 2 of them, but now I only see one of them and it is not the correct one.

I'm using the UserAgent plugin for Firefox to set my user agent to iphone 3

what I see in your page at the moment is this:

<meta name="viewport" content="width=670, initial-scale=0.45, minimum-scale=0.45" />

Actually looking into it what you need to do is set PreZoomForIPhone="false" on the <portal:MetaContent control in layout.master as this is what is adding the bad one.

Hope that helps,

Joe

7/13/2011 1:47:56 PM
TRIAD - Next Level
Gravatar
Total Posts 17
View Posts

Re: iPhone viewport blown out in mojoPortal?

Huge help! I wasn't aware of the default zooming... everything is working great now. Thanks again for your help!

7/14/2011 5:41:20 AM
Joe Audette
Gravatar
Total Posts 18439
View Posts

Re: iPhone viewport blown out in mojoPortal?

I had actually forgotten about that myself. It was something I added when I first got my iPhone a long time ago I found it helped to pre zoom a little when using the normal web site view so you could read and click the menu links easier, but of course that was before I came up with a real strategy for mobile like we have now.

Best,

Joe

You must sign in to post in the forums. This thread is closed to new posts.