Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

mobile web design not rendering correct size

Posted on 2012-04-13
12
Medium Priority
?
537 Views
Last Modified: 2013-12-27
<!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>
0
Comment
Question by:Pamela4
[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
  • 5
  • 5
12 Comments
 
LVL 24

Expert Comment

by:alexey_gusev
ID: 37846128
erm, what's the devices,  OS versions and so on? and what is your question?
0
 
LVL 16

Expert Comment

by:hjgode
ID: 37846609
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
 
LVL 24

Assisted Solution

by:alexey_gusev
alexey_gusev earned 2000 total points
ID: 37846624
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:Pamela4
ID: 37851670
I have it working on the iPhone. Using the above code. Thanks
0
 
LVL 24

Assisted Solution

by:alexey_gusev
alexey_gusev earned 2000 total points
ID: 37852220
for Android, please try

<meta name="viewport" content="width=device-width, initial-scale=1" />
0
 

Author Comment

by:Pamela4
ID: 37853156
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
 
LVL 24

Accepted Solution

by:
alexey_gusev earned 2000 total points
ID: 37854583
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
 

Author Comment

by:Pamela4
ID: 37921955
I've requested that this question be deleted for the following reason:

I figured it out myself
0
 
LVL 24

Expert Comment

by:alexey_gusev
ID: 37921956
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
 

Author Comment

by:Pamela4
ID: 37926209
great it works on iphone but now I can't get it to streatch on android.
0
 

Author Comment

by:Pamela4
ID: 37935375
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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

MS outlook is a premier email client that enable you to send and receive the e-mails with various file formats of attachments such as document files, media file, and many others formats. There is some scenario occurs when a receiver of an e-mail mes…
As the title indicates, I have done this before. It chills me everytime I update the OS on my phone, (http://www.experts-exchange.com/articles/18084/Upgrading-to-Android-5-0-Lollipop.html) because one time I did this and I essentially had a bricked …
In this tutorial viewers will learn how to create blended and gradiated shapes in Illustrator using the blend tool Draw two shapes, one of them in a different color: Select both and create a blend by going to Object > Blend > Make: Blends can also b…
Learn how to set up basic frames and paths in Prezi and understand the open space that Prezi allows you to create presentations in.

721 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