SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict D3V4's Avatar
    Join Date
    May 2010
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mobile CSS inconsistency

    I'm testing a mobile design on my computer, with ProtoFluid. Rapid Prototyping of Adaptive CSS and Responsive Design.. Here is a screenshot of the (work in progress) design, as seen with the webapp:



    Here is how it is displayed on an actual iPhone 3GS:



    Why is this happening?

  2. #2
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,820
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Mobile phone browsers are a law unto themselves. There isn't a huge amount of consistency between different browsers and different phones. Your best bet is to check it on a few of the most common ones and make sure it is usable - don't worry if there are some differences, as long as people can use it.

  3. #3
    SitePoint Addict D3V4's Avatar
    Join Date
    May 2010
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I understand this, but the fact is that in this case it should work correctly on the iPhone (also because in the simulator it does work indeed). Let me show you the code.

    In the HTML, inside the head section:

    Code:
    <link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="css/mobile.css" />
    And here's the CSS:

    Code:
    
    	
    	#login {
    		display: none;
    	}
    	
    	#login_mobile {
    		display: inline;
    	}
    	
    	#login_mobile form div label, #login_mobile form div input {
    		float: none;
    		margin: 0;
    	}
    	
    	#login_mobile form div {
    		margin: 0;
    		width: 220px;
    	}
    	
    	#login_mobile form input {
    		width: 280px;
    	}
    	
    	#login_mobile form input[type="submit"] {
    		margin-top: 25px;
    		width: 295px;
    	}
    	
    	body {
    		width: 320px;
    	}
    
    	#header {
    		border: none;
    		width: 320px;
    	}
    	
    	h1 {
    		border-bottom: 1px solid green;
    		color: blue;
    		font-size: 48px;
    		margin: 0;
    		text-align: center;
    		width: 300px;
    	}
    	
    	a {
    		text-decoration: none;
    	}
    	
    	/*#menu {
    		border: none;
    	}*/
    	
    	#menu li {
    		font-size: 12px;
    		margin: 0;
    	}
    	
    	#menu li a {
    		padding: 31px 3px 33px 3px;
    	}
    	
    	#menu li a {
    		background-color: #a0d9a7;
    	}
    	
    	#menu li a:link {
    		background-color: transparent;
    	}
    	
    	#menu li a[href="inserisci.php"] {
    		background-color: transparent;
    	}
    	
    	#header img {
    		display: none;
    	}
    	
    	#mesi {
    		display: none;
    	}
    	
    	#mesi_mobile, #mesi_mobile li {
    		display: inline;
    	}
    	
    	#mesi_mobile li {
    		padding-right: 12px;
    	}
    	
    	#footer {
    		display: none;
    	}
    As you can see, I specifically say that the elements should be 280px wide, but if I look at it on the iPhone they are not even half the screen wide.

  4. #4
    SitePoint Addict D3V4's Avatar
    Join Date
    May 2010
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Solved, I had to add the viewport meta tag in the HTML.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •