Together with the CSS this will result in most of all pages being displayed as desired. However, there's a couple of pages where the content is being cut off (like pages with wider tables or one with a wizard). If you double-tap one of those pages on a cell-phone, it will be resized to show the complete page though.
... the page will be scaled so that all content is visible. This is OK for pages that need to render wider content. However, for pages with narrower content, it would be better to have the scale-factor as applied by the first meta-tag. Also, if the phone-user
i.e. double-taps the page in order to zoom in, the scrolling will again not be possible.
I'm wondering as to what would be the recommended way to deal with this - any pointers would be welcome.
I'm wondering as to what would be the recommended way to deal with this - any pointers would be welcome.
Not to burst your bubble, but tables just don't work well in mobile devices -- they're too big and/or ugly. Lists just look much nicer on those devices.
yes, I've seen bunches of sites that explain the viewport meta-tag. I tested bunches of combinations, none of them really resulting in anything that would have been all too satisfactory ...
... gives me "acceptable" results (on Android & iPhone). If I double-tap on the pages with wider content (on Android), it zooms in just as much as would be required to see the whole content. However, I can't seem to get this zoom-level with any of the
viewport-MetaTag settings. I might get away with setting the appropriate
initial-scale level, but this would require to be set from the ContentPage.
Is there a way to override the MasterPage's viewport-settings?
... gives me "acceptable" results (on Android & iPhone). If I double-tap on the pages with wider content (on Android), it zooms in just as much as would be required to see the whole content. However, I can't seem to get this zoom-level with any of the
viewport-MetaTag settings. I might get away with setting the appropriate
initial-scale level, but this would require to be set from the ContentPage.
Is there a way to override the MasterPage's viewport-settings?
The approach is the same as letting a view set the <title>. In the view do something like this:
sorry for not getting back to you earlier - I needed to put the project on hold in order to deal with something else. As a consequence, I simply haven't found the time to check out your suggestions. I haven't forgotten about this though and will come back
to this later, presumably during December. So just a quick heads up and "thank you" for your help!
Olaf Rabbach...
0 Points
9 Posts
Mobile optimized website - broad table
Oct 09, 2012 04:58 PM|LINK
Hi there,
I have a website that uses a different MasterPage and CSS for mobile phones specifically.
The mobile MP has this tag:
Together with the CSS this will result in most of all pages being displayed as desired.
However, there's a couple of pages where the content is being cut off (like pages with wider tables or one with a wizard). If you double-tap one of those pages on a cell-phone, it will be resized to show the complete page though.
If I change the meta-tag to this ...
... the page will be scaled so that all content is visible. This is OK for pages that need to render wider content. However, for pages with narrower content, it would be better to have the scale-factor as applied by the first meta-tag. Also, if the phone-user i.e. double-taps the page in order to zoom in, the scrolling will again not be possible.
I'm wondering as to what would be the recommended way to deal with this - any pointers would be welcome.
Cheers,
Olaf
roopeshreddy
All-Star
20155 Points
3328 Posts
Re: Mobile optimized website - broad table
Oct 09, 2012 05:41 PM|LINK
Hi,
I think you can control the Viewport meta in JavaScript for the pages, which you require narrow, by enabling the content set to different parameters!
For more information on Viewport Meta tag - https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/doc/uid/TP40008193-SW2
Hope it helps u...
Roopesh Reddy C
Roopesh's Space
BrockAllen
All-Star
27544 Points
4907 Posts
MVP
Re: Mobile optimized website - broad table
Oct 09, 2012 06:56 PM|LINK
Not to burst your bubble, but tables just don't work well in mobile devices -- they're too big and/or ugly. Lists just look much nicer on those devices.
DevelopMentor | http://www.develop.com
thinktecture | http://www.thinktecture.com/
Olaf Rabbach...
0 Points
9 Posts
Re: Mobile optimized website - broad table
Oct 10, 2012 08:34 AM|LINK
Hi Brock,
do you have anything particular in mind, such as a "best-choice" ASP-control?
Cheers,
Olaf
Olaf Rabbach...
0 Points
9 Posts
Re: Mobile optimized website - broad table
Oct 10, 2012 08:36 AM|LINK
Hi Roopesh,
yes, I've seen bunches of sites that explain the viewport meta-tag. I tested bunches of combinations, none of them really resulting in anything that would have been all too satisfactory ...
But thanks nonetheless!
Cheers,
Olaf
BrockAllen
All-Star
27544 Points
4907 Posts
MVP
Re: Mobile optimized website - broad table
Oct 10, 2012 02:00 PM|LINK
<ul> and <li>
DevelopMentor | http://www.develop.com
thinktecture | http://www.thinktecture.com/
Olaf Rabbach...
0 Points
9 Posts
Re: Mobile optimized website - broad table
Oct 11, 2012 01:46 PM|LINK
Hi Brock,
ouch. :-)
Actually, this ...
... gives me "acceptable" results (on Android & iPhone). If I double-tap on the pages with wider content (on Android), it zooms in just as much as would be required to see the whole content. However, I can't seem to get this zoom-level with any of the viewport-MetaTag settings. I might get away with setting the appropriate initial-scale level, but this would require to be set from the ContentPage.
Is there a way to override the MasterPage's viewport-settings?
Cheers,
Olaf
BrockAllen
All-Star
27544 Points
4907 Posts
MVP
Re: Mobile optimized website - broad table
Oct 11, 2012 03:46 PM|LINK
Yea, you'll have to excuse me -- I'm not a big fan of all those third party grids/widgets.
The approach is the same as letting a view set the <title>. In the view do something like this:
@{ ViewBag.ViewPort = "foo"; }
and in the layout:
@if(ViewBag.ViewPort != null) {
<meta name='viewport' content='@ViewBag.ViewPort' />
}
Or something like that :)
DevelopMentor | http://www.develop.com
thinktecture | http://www.thinktecture.com/
roopeshreddy
All-Star
20155 Points
3328 Posts
Re: Mobile optimized website - broad table
Oct 11, 2012 04:53 PM|LINK
Hi,
You can do that! I assume that you are using ASP.NET WebForms!
Check the below code!
//Site.Master <meta name="viewport" content="width=device-width" runat="server" id="mViewport" /> //Content Page //You need to add to access the controls in the Master page with "Master" property <%@ MasterType VirtualPath="~/Site.Master" %> protected void Page_Load(object sender, EventArgs e) { System.Web.UI.HtmlControls.HtmlMeta mViewPort = Master.FindControl("mViewport") as System.Web.UI.HtmlControls.HtmlMeta; mViewPort.Content = ""; //your custom content }Hope it helps u...
Roopesh Reddy C
Roopesh's Space
Olaf Rabbach...
0 Points
9 Posts
Re: Mobile optimized website - broad table
Nov 23, 2012 02:47 PM|LINK
Hi guys,
sorry for not getting back to you earlier - I needed to put the project on hold in order to deal with something else. As a consequence, I simply haven't found the time to check out your suggestions. I haven't forgotten about this though and will come back to this later, presumably during December. So just a quick heads up and "thank you" for your help!
Cheers,
Olaf