ASP.net Web App - View on mobile devices

Hi
I have the following web page where I dynamically add charts. The site resides on www.webexcel.co.za and I want add code that uses code such as Request.Browser.IsMobileDevice to get the phone to fit as well as possible onto mobile devices. How can I achieve this? At the moment the page seems to zoom right in when I don't want it to

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="DataVisualization.aspx.vb" Inherits="Pivot.DataVisualization" MaintainScrollPositionOnPostback="true"   %>

<%@ Register assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI.DataVisualization.Charting" tagprefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
  <meta name="viewport" content="width=device-width"/>
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
  
    <form id="form1" runat="server">
    <div>
      <asp:ScriptManager ID="ScriptManager1" 
                               runat="server" /> 



 
        <asp:Timer ID="Timer1" runat="server" Interval="3000000">
        </asp:Timer>

        <table id="Table_Buttons" runat="server"> 
        <tr>
        <td>
            <asp:Button ID="Button1" runat="server" BackColor="White" ForeColor="#000099" 
                Text="Button 1" Height="45px" Visible="False" />
            </td>  <td></td>   <td>
            <asp:Button ID="Button2" runat="server" BackColor="White" ForeColor="#000099" 
                Text="Button 2" Visible="False" Height="45px" />
            </td>  <td></td>   <td>
            <asp:Button ID="Button3" runat="server" BackColor="White" ForeColor="#000099" 
                Text="Button 3" Visible="False" Height="45px" />
            </td> <td></td>  <td>
            <asp:Button ID="Button4" runat="server" BackColor="White" ForeColor="#000099" 
                Text="Button 4" Visible="False" Height="45px" />
            </td>   <td></td>  <td>
            <asp:Button ID="Button5" runat="server" BackColor="White" ForeColor="#000099" 
                Text="Button 5" Visible="False" Height="45px" />
            </td>   <td></td> <td>
            <asp:Button ID="Button6" runat="server" BackColor="White" ForeColor="#000099" 
                Text="Button 6" Visible="False" Height="45px" />
            </td>   <td></td>  <td>
            <asp:Button ID="Button7" runat="server" BackColor="White" ForeColor="#000099" 
                Text="Button 7" Visible="False" Height="45px" />
            </td>   <td></td> <td>
            <asp:Button ID="Button8" runat="server" BackColor="White" ForeColor="#000099" 
                Text="Button 8" UseSubmitBehavior="False" Visible="False" Height="45px" />
            </td>  <td></td>   <td>
            <asp:Button ID="Button9" runat="server" BackColor="White" ForeColor="#000099" 
                Text="Button 9" Visible="False" Height="45px" />
            </td>  <td></td>   <td>
            <asp:Button ID="Button10" runat="server" BackColor="White" ForeColor="#000099" 
                Text="Button 10" Visible="False" Height="45px" />
            </td> <td></td>
        </tr>
        </table>



 
        <asp:Label ID="lblWebPages" runat="server" BackColor="#FF0066" 
            ForeColor="#FFCCFF" Text="WebPages" Visible="False"></asp:Label>



 
        <asp:Label ID="lblCharts" runat="server" BackColor="#FFFF66" 
            ForeColor="#003399" Text="Charts" Visible="False"></asp:Label>
        <asp:Label ID="lblChartGridViews" runat="server" BackColor="#FF9900" 
            ForeColor="#003399" Text="ChartGridViews" Visible="False"></asp:Label>

        <asp:Label ID="lblGradient1" runat="server" BackColor="#660066" 
            ForeColor="White" Text="Gradient1" Visible="False"></asp:Label>
        <asp:Label ID="lblGradient2" runat="server" BackColor="#660033" 
            ForeColor="White" Text="Gradient2" Visible="False"></asp:Label>

        <asp:Label ID="lblMultiChartForColumns" runat="server" BackColor="#66FFFF" 
            ForeColor="#003399" Text="MultiChartForColumns" Visible="False"></asp:Label>

        <asp:Label ID="lblCurrentControl" runat="server" BackColor="#FF9900" 
            ForeColor="Yellow" Text="-1" Visible="False"></asp:Label>

        <asp:Label ID="lblGridViews" runat="server" BackColor="#99CCFF" 
            ForeColor="#003399" Text="GridViews" Visible="False"></asp:Label>
        <asp:Label ID="lblRowIndex" runat="server" BackColor="#FF9933" 
            ForeColor="#003399" Text="RowIndex" Visible="False"></asp:Label>
        <asp:Label ID="lblColumnIndex" runat="server" BackColor="#666699" 
            ForeColor="#003399" Text="ColumnIndex" Visible="False"></asp:Label>
        <asp:Label ID="lblHighestControlIndex" runat="server" BackColor="Maroon" 
            ForeColor="Yellow" Text="0" Visible="False"></asp:Label>

        <asp:Label ID="lblControlType" runat="server" BackColor="#66FF33" 
            ForeColor="#003399" Text="ControlType" Visible="False"></asp:Label>
        <asp:Label ID="lblHeight" runat="server" BackColor="#00CCFF" 
            ForeColor="#003399" Text="Height" Visible="False"></asp:Label>
        <asp:Label ID="lblWidth" runat="server" BackColor="#009933" 
            ForeColor="#003399" Text="Width" Visible="False"></asp:Label>
        <asp:Label ID="lblDatabaseType" runat="server" BackColor="#CC6699" 
            ForeColor="#003399" Text="DatabaseType" Visible="False"></asp:Label>
        <asp:Label ID="lblConnectionString" runat="server" BackColor="#FFFF99" 
            ForeColor="#003399" Text="ConnectionString" Visible="False"></asp:Label>
  
        <asp:Label ID="lblSQL" runat="server" BackColor="#FF9933" 
            ForeColor="#003399" Text="SQL" Visible="False"></asp:Label>
        <asp:Label ID="lblPivotOrNot" runat="server" BackColor="#CC9900" 
            ForeColor="#003399" Text="PivotOrNot" Visible="False"></asp:Label>
        <asp:Label ID="lblDataField" runat="server" BackColor="#FFFF99" 
            ForeColor="#003399" Text="DataField" Visible="False"></asp:Label>
        <asp:Label ID="lblRowFields" runat="server" BackColor="#FF5050" 
            ForeColor="#003399" Text="RowFields" Visible="False"></asp:Label>
        <asp:Label ID="lblColumnFields" runat="server" BackColor="#00FF99" 
            ForeColor="#3333FF" Text="ColumnFields" Visible="False"></asp:Label>
        <asp:Label ID="lblAggregate" runat="server" BackColor="#FF9933" 
            ForeColor="#003399" Text="Aggregate" Visible="False"></asp:Label>
     
        <br />
        <asp:Label ID="lblControlProperties" runat="server" BackColor="#CC3300" 
            ForeColor="White" Text="ControlProperties" Visible="False"></asp:Label>
     
        <asp:Label ID="lblWebReportCellInfo" runat="server" BackColor="#003300" 
            ForeColor="White" Text="WebReportCellInfo" Visible="False"></asp:Label>
     
        <asp:Label ID="lblWebReportRowInfo" runat="server" BackColor="#000066" 
            ForeColor="White" Text="WebReportRowInfo" Visible="False"></asp:Label>
     
        <asp:Label ID="lblWebReportRowHeights" runat="server" BackColor="Red" 
            ForeColor="White" Text="WebReportRowHeights" Visible="False"></asp:Label>
     
        <asp:Label ID="lblWebReportColumnWidths" runat="server" BackColor="#FF9900" 
            ForeColor="White" Text="WebReportColumnWidths" Visible="False"></asp:Label>
     
        <asp:Label ID="lblWebReportBorder" runat="server" BackColor="#FF0066" 
            ForeColor="White" Text="WebReportBorder" Visible="False"></asp:Label>
     
        <asp:Label ID="lblQueryCellDistinctQueryNames" runat="server" BackColor="#66FF33" 
            ForeColor="#003399" Text="QueryCellDistinctQueryNames" Visible="False"></asp:Label>
     
    <asp:Table ID="Table1" runat="server">
        <asp:TableRow runat="server" HorizontalAlign="Left" VerticalAlign="Top">
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
        </asp:TableRow>
    </asp:Table>
    <asp:Table ID="Table2" runat="server" Visible="False">
        <asp:TableRow runat="server" HorizontalAlign="Left" VerticalAlign="Top">
            <asp:TableCell runat="server"></asp:TableCell>
            <asp:TableCell runat="server"></asp:TableCell>
            <asp:TableCell runat="server"></asp:TableCell>
            <asp:TableCell runat="server"></asp:TableCell>
            <asp:TableCell runat="server"></asp:TableCell>
            <asp:TableCell runat="server"></asp:TableCell>
            <asp:TableCell runat="server"></asp:TableCell>
            <asp:TableCell runat="server"></asp:TableCell>
            <asp:TableCell runat="server"></asp:TableCell>
            <asp:TableCell runat="server"></asp:TableCell>
        </asp:TableRow>
    </asp:Table>
    <asp:Table ID="Table3" runat="server" Visible="False">
        <asp:TableRow runat="server" HorizontalAlign="Left" VerticalAlign="Top">
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
        </asp:TableRow>
    </asp:Table>
    <asp:Table ID="Table4" runat="server" Visible="False">
        <asp:TableRow runat="server" HorizontalAlign="Left" VerticalAlign="Top">
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
        </asp:TableRow>
    </asp:Table>
    <asp:Table ID="Table5" runat="server" Visible="False">
        <asp:TableRow runat="server" HorizontalAlign="Left" VerticalAlign="Top">
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
        </asp:TableRow>
    </asp:Table>
    <asp:Table ID="Table6" runat="server" Visible="False">
        <asp:TableRow runat="server" HorizontalAlign="Left" VerticalAlign="Top">
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
        </asp:TableRow>
    </asp:Table>
    <asp:Table ID="Table7" runat="server" Visible="False">
        <asp:TableRow runat="server" HorizontalAlign="Left" VerticalAlign="Top">
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
        </asp:TableRow>
    </asp:Table>
    <asp:Table ID="Table8" runat="server" Visible="False">
        <asp:TableRow runat="server" HorizontalAlign="Left" VerticalAlign="Top">
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
        </asp:TableRow>
    </asp:Table>
    <asp:Table ID="Table9" runat="server" Visible="False">
        <asp:TableRow runat="server" HorizontalAlign="Left" VerticalAlign="Top">
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
        </asp:TableRow>
    </asp:Table>
    <asp:Table ID="Table10" runat="server" Visible="False">
        <asp:TableRow runat="server" HorizontalAlign="Left" VerticalAlign="Top">
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
            <asp:TableCell runat="server" VerticalAlign="Top"></asp:TableCell>
        </asp:TableRow>
    </asp:Table>
        <asp:Panel ID="Panel1" runat="server" Width="284px">
        </asp:Panel>
        <br />
    
    </div>
    </form>
</body>
</html>

Open in new window

Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

tbrent77Commented:
Because mobile phones OS's vary, and there are many browsers they use, I don't think it will be possible to control zoom on all of them.  You might be able to detect its a phone and re-direct to a different page for mobile phone use but the zoom may be out of reach to control.  There are companies who specialize in converting a website to mobile web browsers and some of them are free with the web host company like hostmonster.   I have several web sites up that work fine on mobile phones with no modifications at all, but  as I said, it depends on the phone and the browser more than anything. Mobiweb and gomobi are two of the sites who converts conventional sites to mobile phone browsing.  But if controlling the startup zoom is important, then I would make sure those companies can control it because I have doubts due to the variety of browsers in use on phones.  The simple answer is to detect a mobile phone, re-direct to a page where the size will fit most common models without zoom being needed if that is possible in your application.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAuthor Commented:
thanks
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.