?
Solved

ASP.net Web App - View on mobile devices

Posted on 2014-07-19
3
Medium Priority
?
205 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:Murray Brown
[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 2000 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:Murray Brown
ID: 40217724
thanks
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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

I recently went through the process of creating a Calendar Control of events with the basis of using a database to keep track of the dates that are selectable, one requirement was to have the selected date pop-up in a simple lightbox.  At first this…
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.
Michael from AdRem Software outlines event notifications and Automatic Corrective Actions in network monitoring. Automatic Corrective Actions are scripts, which can automatically run upon discovery of a certain undesirable condition in your network.…
How to fix incompatible JVM issue while installing Eclipse While installing Eclipse in windows, got one error like above and unable to proceed with the installation. This video describes how to successfully install Eclipse. How to solve incompa…
Suggested Courses

777 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