Viewport for Ie10 & 11 Desktop, But Not Mobile

Viewport for IE10 & 11 desktop, but not mobile

Is this the same issue as outlined in the Bootstrap documentation? If so, getbootstrap.com/docs/3.3/getting-started/#support-ie10-width has a JS fix. From the site:

Windows Phone 8 and Internet Explorer 10

Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, you can optionally include the following CSS and JavaScript to work around this problem until Microsoft issues a fix.

@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement("style")
  msViewportStyle.appendChild(
    document.createTextNode(
      "@-ms-viewport{width:auto!important}"
    )
  )
  document.getElementsByTagName("head")[0].appendChild(msViewportStyle)
}

For more information and usage guidelines, read Windows Phone 8 and Device-Width.

Responsive site working on mobile in test but not in build

It turns out that the problem was that where I got my URL used a www-forwarder that wrapped my page in a frame. This ruined the responsiveness.
By changing the URL to a DNS service instead, the wrapper was removed and my site worked as expected.

Please help that I can @font-face for only web not mobile

you can target ie mobile using conditional comments...the example below is how to target everything but ie mobile:

<![if !IEMobile]> 
<style> put your @font-face here </style>
<![endif]>

if you still have to target ie10, you can use conditional compilation for targeting, which is almost exactly like conditional comments. you can see a working demo here: http://dev.bowdenweb.com/ua/browsers/ie/ie10-detection-via-cc.html

How to do viewport sizing and scaling for cross browser support?

As soon as I found out that other browsers had this problem as well, I was able to find better results on the internet.

I have found a solution on at least a part of the question. The viewport sizing seems to work now and we get the correct scale. It still seems I have to accept the fact that with this solution, the user will be able to scale the page manually.

This answer was stripped from a different question:

Trying rendering the viewport meta tag like so:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Setting scale settings will set user restrictions on how far they can zoom, and so if you set the initial and maximum to the same amount, this should fix the problem.

UPDATE: I was able to fix my bug for android devices all together by setting the below:

<meta name="viewport" content="width=640px, initial-scale=.5, maximum-scale=.5" />

I also noticed that some content, such as p tags were not flowing across the screen, so the hack for that would be to add the background-image property with empty string to any content that is stuck and is not going across the layout view. Hope this helps this time for you.

Is it possible to set a viewport for iOS only through CSS, without meta-tag

As of writing this (Dez '13), the CSS Device Adaption (including @viewport) is not ready to use and has far from perfect browser support. Therefor, setting a viewport for iOS only through CSS is currently not possible.

Browser support:

• Internet Explorer 10 (msdn.microsoft.com) – vendor-prefixed: @-ms-viewport
• Opera Mobile 11 (dev.opera.com) – vendor-prefixed: @-o-viewport

Further information:

• html5hacks.com: Elegantly Resize Your Page With the @-viewport CSS Declaration
• treehouse blog: CSS Device Adaptation With @viewport
• As of the Bootstrap documentation IE10 in Windows 8 and Windows Phone 8 need some fixes to work properly:
  

  Internet Explorer 10 in Windows 8 and Windows Phone 8

  
  

  Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't properly apply the media queries in Bootstrap's CSS. Normally you'd just add a quick snippet of CSS to fix this:

  @-ms-viewport       { width: device-width; }
  

  
  

  However, this doesn't work as it causes Windows Phone 8 devices to show a mostly desktop view instead of narrow "phone" view. To address this, you'll need to include the following CSS and JavaScript to work around the bug until Microsoft issues a fix.

  CSS:

  @-webkit-viewport   { width: device-width; }
  @-moz-viewport      { width: device-width; }
  @-ms-viewport       { width: device-width; }
  @-o-viewport        { width: device-width; }
  @viewport           { width: device-width; }
  

  
  

  JS:

  if (navigator.userAgent.match(/IEMobile/10.0/)) {
    var msViewportStyle = document.createElement("style")
    msViewportStyle.appendChild(
      document.createTextNode(
        "@-ms-viewport{width:auto!important}"
      )
    )
    document.getElementsByTagName("head")[0].appendChild(msViewportStyle)
  }
  

  
  

  For more information and usage guidelines, read Windows Phone 8 and Device-Width.

window.devicePixelRatio does not work in IE 10 Mobile?

window.devicePixelRatio = window.devicePixelRatio || 
Math.round(window.screen.availWidth / document.documentElement.clientWidth)

Got it from http://blogs.windows.com/windows_phone/b/wpdev/archive/2012/11/08/internet-explorer-10-brings-html5-to-windows-phone-8-in-a-big-way.aspx

Media Queries not working in Internet Explorer 10

A few resources here on @media usage on Internet Explorer 11 and under.

• Targetting Internet Explorer Best Practices
• CanIUse @Media (Shows known issues with IE10)
• Browser Compatability Best Practices.
• IE10 Specific Styles (Some techniques)
• IE10 CSS Hacks
• IE10 vs Media Queries

Some people have been known to try tricks like below as well with success, but IE10 can be unforgiving. Note the prefixes and see the CanIUse Knowledge Objects.

@-ms-viewport {
width: device-width;
}

If that doesn't do the trick, you could try removing the screen parameter
and styling specifically for IE10 like so.

Per this article on targeting IE10, this little workaround exists since conditional comments aren't recognized since IE10.

@media (max-width: 575.98px)[data-useragent*='MSIE 10.0']{
     .layer-hover .plus {
         font-size: 2.5rem;
    }
     layer-hover-2 .plus[data-useragent*='MSIE 10.0'] {
         font-size: 2.5rem;
    }
     .layer-hover a[data-useragent*='MSIE 10.0']{
         width: 70%;
         padding: 5px 0;
         font-size: 10px;
    }
     .layer-hover-2 a[data-useragent*='MSIE 10.0'] {
         width: 70%;
         padding: 5px 0;
         font-size: 10px;
    }
}

Another possible hack you could try is mentioned on Mediacurrent with lots of success stories.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    // IE10+ CSS here
}

---

Related Topics