mobile web design not rendering correct size

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Master Language="C#" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta http-equiv="cache-control" content="max-age=200" />
<title>A leading staffing and recruitment agency | Celebrity Staff</title>
<meta name="Description" content="Celebrity Staff provides legal, management, and administrative staffing services on a project and full-time basis. Celebrity Staff is a leading provider of attorneys, paralegals and legal support personnel for law firms and corporate legal departments." />
<meta name="Keywords" content="Celebrity Staff - Legal Staffing Agency, Admistrative Staffing Services, Management Staffing Services, Attorney Staffing Services, Omaha, Lincoln, Des Moines, Legal Staffing Services, Temporary Attorney, Temporary Legal Job, Temporary Legal Staffing, General Practice Attorneys, Legal Support Services, Omaha Jobs, Lincoln Jobs, Kansas City Jobs, Des Moines Jobs" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<link rel="stylesheet" type="text/css" href="styles/celebrityMobile.css" />
</head>

<body>

<form id="form1" runat="server">
      <div class="wrap">
 
  <div id="TopNav">
 
  <div id="Menu"><a href="menupopup.html">
      <img src="images/menuBtn.gif" alt="Menu" width="65" height="17" border="0" /></a></div>
 
    <div id="logIn"><a href="#login">
            <img src="images/logInBtn.gif" alt="Login" width="68" height="16" border="0" align="right" /></a></div>
  </div>
 
  <div>
<asp:ContentPlaceHolder id="banner" runat="server">
      <p>
      <img alt="Contact Us" src="images/ContactUsBanner.jpg" width="320" height="74" /></p>
      </asp:ContentPlaceHolder>


<asp:ContentPlaceHolder id="Body" runat="server">
      <br />
      <p><span class="blueheaders">Contact Us</span> </p>
      <p class="bodycopy">copy kvmoijwoei wen mnlkj/weopu pwu lknsdknlwke jfwpqofj/lfneklnvel/akw
      iopjfwemdmxcw;o mw;qo mq;woi pivwel mfwcopy kvmoijwoei wen mnlkj/weopu pwu
      lknsdknlwke jfwpqofj/lfneklnvel/akw iopjfwemdmxcw;o mw;qo mq;woi pivwel
      mfwcopy kvmoijwoei wen mnlkj/weopu pwu lknsdknlwke jfwpqofj/lfneklnvel/akw
      iopjfwemdmxcw;o mw;qo mq;woi pivwel mfwcopy kvmoijwoei wen mnlkj/weopu pwu
      lknsdknlwke jfwpqofj/lfneklnvel/akw iopjfwemdmxcw;o mw;qo mq;woi pivwel
      mfwcopy kvmoijwoei wen mnlkj/weopu pwu lknsdknlwke jfwpqofj/lfneklnvel/akw
      iopjfwemdmxcw;o mw;qo mq;woi pivwel mfw</p><br />
      <br />
      </asp:ContentPlaceHolder>
   
 
 <div id="footer">
 <div id="footerTop">
    <div id="footerTop"><map name="FPMap0" id="FPMap0">
            <area href="http://www.facebook.com/pages/Celebrity-Staff-Administrative-Management-and-Legal-Staffing/50364816361" shape="rect" coords="198, 8, 233, 40" />
            <area href="https://www.linkedin.com/uas/login?session_redirect=http%3A//www.linkedin.com/postLogin?session_rikey=wsRAJ16uW_fGyh0iYEoPCNE2P0AQ-t6c2Iw2Gihtd3-uPE8-8kXx4hBSntbuLEmg8gZCGBpVStdvbkK4R9xYpi1FS9TO4-5mwY0&amp;l=http%3A%2F%2Fwww%2Elinkedin%2Ecom%2Fgroups%3Fgid%3D1853410&amp;id=0&amp;b=d3ad5818-955f-433c-b532-3a6103b74b75&amp;h=W_TY&amp;m=GET" shape="rect" coords="240, 10, 270, 40" />
            <area href="http://www.celebritystaff.com/blog/" shape="rect" coords="279, 8, 309, 41" />
            </map>
            <img src="images/FooterBkgd_staticTop.jpg" width="320" height="43" usemap="#FPMap0"/><div id="footerBot"><a href="http://www.celebritystaff.com" class="lrgWhite">
            View Full Site</a><span class="whiteCopy"><br />
          © Copyright 2012 Celebrity StaffSM | </span> <a href="#privacyPolicy" class="smWhite">Privacy Policy</a></div></div><br/>
    </div>
</div>
</div>
</div>
</form>
 
  <!-- JavaScript at the bottom for fast page loading -->

  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
  <script>window.jQuery || document.write("<script src='js/libs/jquery-1.5.1.min.js'>\x3C/script>")</script>
 
  <!-- scripts concatenated and minified via ant build script -->
  <script src="js/mylibs/helper.js"></script>
  <!-- end concatenated and minified scripts-->
 
  <script>
    // iPhone Scale Bug Fix, read this when using http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/
    MBP.scaleFix();
   
    // Media Queries Polyfill https://github.com/shichuan/mobile-html5-boilerplate/wiki/Media-Queries-Polyfill
    yepnope({
      test : Modernizr.mq('(min-width)'),
      nope : ['js/libs/respond.min.js']
    });
  </script>
 
  <!-- Debugger - remove for production -->
  <!-- <script src="https://getfirebug.com/firebug-lite.js"></script> -->
 
  <!-- mathiasbynens.be/notes/async-analytics-snippet Change UA-XXXXX-X to be your site's ID -->
  <script>
    var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]];
    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
    g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
    s.parentNode.insertBefore(g,s)}(document,"script"));
  </script>

 
</body>

</html>
Pamela4Asked:
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.

alexey_gusevCommented:
erm, what's the devices,  OS versions and so on? and what is your question?
0
hjgodeCommented:
Hello

I am also missing many informations in this question:
1. What do you expect? Any screen shot?
2. What is the server running (IIS?)?
3. What is the 'mobile' client device? A windows mobile 6.1 or 6.5.3 or Android or what?
4. The html code references a CSS file. This file is also essential for the way the code is rendered. Can you attach this and the referenced javascript files too?

I assume we are unable to help without knowing these details.

regards

Josef
0
alexey_gusevCommented:
just in case it's iOS, setting viewport usually helps:

<head>
<meta name="viewport" content="user-scalable=yes, width=device-width" />
....
<!-- the rest of your page -->

it doesn't work properly on Android though
0
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

Pamela4Author Commented:
I have it working on the iPhone. Using the above code. Thanks
0
alexey_gusevCommented:
for Android, please try

<meta name="viewport" content="width=device-width, initial-scale=1" />
0
Pamela4Author Commented:
I attached the files. The page fits the iPhone held up-right but not flipped horizontal.
about-us.aspx
celebrityMobile.css
jquery.mobile-1.0a3.min.css
0
alexey_gusevCommented:
I believe you need to handle onorientationchage event, something along these lines:

http://stackoverflow.com/questions/5220999/how-to-handle-javascript-onorientationchange-event-inside-uiwebview
http://ajaxian.com/archives/iphone-windowonorientationchange-code

iPhone has standard dimensions at least :) unlike Android
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
Pamela4Author Commented:
I've requested that this question be deleted for the following reason:

I figured it out myself
0
alexey_gusevCommented:
not that I really care :) but in the following post (ID: 37851670) the author says


I have it working on the iPhone. Using the above code. Thanks

...and all the rest of the thread.

anyway, good luck!
0
Pamela4Author Commented:
great it works on iphone but now I can't get it to streatch on android.
0
Pamela4Author Commented:
1. The mobile site works fine on iphone for resizing on landscape. On android the landscape does not fill the screen it only turns landscape and does not resize.
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
Smartphone Programming

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.