Solved

ASP.net Web App - View on mobile devices

Posted on 2014-07-19
3
203 Views
Last Modified: 2014-07-24
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

0
Comment
Question by:murbro
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 3

Accepted Solution

by:
tbrent77 earned 500 total points
ID: 40207749
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
 

Author Closing Comment

by:murbro
ID: 40217724
thanks
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In .NET 2.0, Microsoft introduced the Web Site.  This was the default way to create a web Project in Visual Studio 2005.  In Visual Studio 2008, the Web Application has been restored as the default web Project in Visual Studio/.NET 3.x The Web Si…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question