Solved

ASP.net Web App - View on mobile devices

Posted on 2014-07-19
3
197 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
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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Microsoft Active Directory, the widely used IT infrastructure, is known for its high risk of credential theft. The best way to test your Active Directory’s vulnerabilities to pass-the-ticket, pass-the-hash, privilege escalation, and malware attacks …
Nobody understands Phishing better than an anti-spam company. That’s why we are providing Phishing Awareness Training to our customers. According to a report by Verizon, only 3% of targeted users report malicious emails to management. With compan…

803 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