Solved

ASP.net Web App - View on mobile devices

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…
The ECB site provides FX rates for major currencies since its inception in 1999 in the form of an XML feed. The files have the following format (reducted for brevity) (CODE) There are three files available HERE (http://www.ecb.europa.eu/stats/exch…
Get a first impression of how PRTG looks and learn how it works.   This video is a short introduction to PRTG, as an initial overview or as a quick start for new PRTG users.
Access reports are powerful and flexible. Learn how to create a query and then a grouped report using the wizard. Modify the report design after the wizard is done to make it look better. There will be another video to explain how to put the final p…

746 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now