SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    1
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question iPhone: Force web page to ALWAYS be rendered with a pixel ratio of 1.0 (not 1.5)

    For example, by default, iPhones and Androids will automatically zoom the page to attempt to make it fit nicely in the frame if no viewport meta tag exists. Web sites designed for desktops will be zoomed out so they fit inside the small viewport, but obviously the pixels aren't really represented truthfully.

    So, how do I display a full size web page on a mobile browser so that "300px" is actually represented with 300 real pixels on the mobile device's screen?

    I know about the meta viewport method, but from what I've been able to tell so far, the pixel ratio used in such cases is 1.5 or 1.0 when the zoom is set to 100% and the width is set to the device_width, and you can detect at what pixel ratio the mobile device is rendering. I don't seem to be able to find some way to explicitly force devices to use only the 1.0 pixel ratio and never the 1.5 pixel ratio.

    How do I for a device to use a pixel ratio of 1.0 so that 300 "pixels" as defined in the CSS actually render across 300 pixels on the mobile device's screen? How do I display a web page at its actual truthful size, not with a pixel ratio of 1.5?

    Here's an example of what I DON'T want: Currently, if you use the meta tag to set the viewport properties of a mobile browser like this:


    HTML Code:
    <meta name="viewport" content="width=device_display, initial-scale=1.0" />

    then that means that the mobile browser will render the page almost exactly like as the page was designed, except that each "pixel" defined in the CSS actually encompasses 1.5 pixels on the device's screen, thus a pixel ratio of 1.5. This 1.5-pixel-ratio convention was set so that designs don't appear to be too small on high-res devices.

    I understand that, but I don't want that in my case.

    I want a forced pixel ratio of 1.0 ALWAYS and I will handle high-res devices in my own way. How do I force a 1.0 pixel ratio in mobile browsers?

    ****If there is a way to simply double the pixel ratio that would work as well

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    There's no way.

    Here's an example of what I DON'T want..
    Sorry, that's precisely what you need. Forget pixels. make content that fits the devices screens without zooming.

    The iphone4 has a res of 320px x 480px in the CSS.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hi jaclyn_psi. Welcome to the forums.

    How do I for a device to use a pixel ratio of 1.0 so that 300 "pixels" as defined in the CSS actually render across 300 pixels on the mobile device's screen?
    You could try something like this:

    Code:
    <meta name="viewport" content="width=300">

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Code:
    <meta name="viewport" content="width=300">
    I want a forced pixel ratio of 1.0 ALWAYS and I will handle high-res devices in my own way. How do I force a 1.0 pixel ratio in mobile browsers?
    I think @jaclyn_psi ; is asking how to make different devices render the pixel differently.

    e.g. render the iphone 3 at 300px (almost full screen) and the iphone 4 at 150px(less than half).
    I have no idea why someone would want to do this but I suppose you could with js doing something like..
    Code:
    <meta id="viewport" name="viewport" content="width=300">
    <script>
    window.onload = function() {
      if (window.devicePixelRatio) {
        document.getElementById('viewport').content = 'width=' + (300 / window.devicePixelRatio);
      }
    });
    </script>

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Yeah, I wasn' sure if I was interpreting rightly. Looks like a clever solution, anyhow, Mark.


Tags for this Thread

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
  •