2 {{ upvoteCount | shortNum }}
2 {{ upvoteCount | shortNum }}

Website working fine on actual phone but not on testing website.

by man5
2 replies
  • WEB DESIGN
    • |
I have a website done in html5 and css3 using the flexible box model. Looks and works great on all major browsers, except for IE(horrible browser). But that's beside the point.

Here's the weird thing. The website fit perfect on my iphone. However, if you go here TestiPhone.com - iPhone Application Web Based Simulator and do a test, it shows totally wrong.

My question, what's the best way to test a website on how it looks on mobile devices?

My second question doesn't relate to this topic but here it goes. I hate IE with passion and i'm sure many of you do too. I've noticed couple things.
1. IE is not compatible with border radius. I tested on IE9.
2. IE is not good with flexible box model.


What you think?
#actual #fine #phone #website #working
  • Profile picture of the author Brandon Tanner
    Originally Posted by man5 View Post

    Here's the weird thing. The website fit perfect on my iphone. However, if you go here TestiPhone.com - iPhone Application Web Based Simulator and do a test, it shows totally wrong.
    That's not a real iPhone simulator. It's simply an iframe in a page with an image of an iPhone around it. So what you see on that page is going to be nothing like what a real iPhone will show.

    Originally Posted by man5 View Post

    My question, what's the best way to test a website on how it looks on mobile devices?
    At the risk of stating the obvious... the best way to test what a website looks like on a mobile device is to view the site on a real mobile device.

    If that's not an option, there are a few online services that offer real mobile emulators you can test with. Browserstack is a good one -- I use it all the time.

    Originally Posted by man5 View Post

    My second question doesn't relate to this topic but here it goes. I hate IE with passion and i'm sure many of you do too. I've noticed couple things.
    1. IE is not compatible with border radius. I tested on IE9.
    2. IE is not good with flexible box model.
    IE is not good with a LOT of things, sadly (particularly HTML5 / CSS3 stuff). But IE9 does support border-radius (see this). If you're not seeing it, then you're either using an older version of IE, or there's something wrong with your code.
    Signature

    {{ DiscussionBoard.errors[8890207].message }}
    • Profile picture of the author man5
      Originally Posted by Brandon Tanner View Post

      That's not a real iPhone simulator. It's simply an iframe in a page with an image of an iPhone around it. So what you see on that page is going to be nothing like what a real iPhone will show.



      At the risk of stating the obvious... the best way to test what a website looks like on a mobile device is to view the site on a real mobile device.

      If that's not an option, there are a few online services that offer real mobile emulators you can test with. Browserstack is a good one -- I use it all the time.



      IE is not good with a LOT of things, sadly (particularly HTML5 / CSS3 stuff). But IE9 does support border-radius (see this). If you're not seeing it, then you're either using an older version of IE, or there's something wrong with your code.

      Good to know. I will check out Browserstack.

      I am using IE9 with windows 7. But it is simply terrible. Takes forever to load and does not open most sites. It also has too many useless add-ons and pop ups. Here is the ie css i am using for a rounded button with a gradient.

      Code:
      display: -ms-flexbox;
 -ms-border-radius: 28px;
background: -ms-linear-gradient(#0689ba, #004f6c); 
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#0689ba', endColorstr='#004f6c')";
      Signature
      www.imdabest.ca
      {{ DiscussionBoard.errors[8890297].message }}

Trending Topics