Suits: Modifying the meta viewport tag for iPhone

  • Unknown's avatar
    hudzillax · Member ·

    We’re using the Suits theme with quite a few CSS overrides. But even if we take out all those CSS overrides, the site always has a border down the right edge on iPhone, which is quite annoying.

    Using the remote inspector for iOS Safari we can see that adding initial-scale=1 to the meta viewport tag fixes the problem, but this doesn’t seem to be possible on WordPress.com – we can’t modify the meta tag, we can’t seem to use CSS @viewport, we can’t override the setting with JavaScript because JavaScript is blocked, and we can’t install a plugin to fix it because plugins are blocked.

    We even tried the (awful!) route of putting a second meta tag into our posts (yes, inside <body>) in the hope that it would work, but WordPress blocks that too.

    Is there a suggested fix for this? The theme has been relatively easy to customise so far, but we’ve spent a couple of days trying to fix that right-hand gap and can’t make it go away!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    designsimply · Member ·

    we can’t seem to use CSS @viewport

    I reviewed our records and I found that @viewport support was added to the WordPress.com CSS Editor in Apr 2013.

    Are you sure your syntax is correct? What is the exact CSS that you were trying to add? I tested several examples, and the @viewport rules I tried all saved without any trouble for me. Here are some examples:

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

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

@viewport {
	width: device-width;
}

@viewport {
	zoom: 1;
	width: extend-to-zoom;
}

@viewport {
	zoom: 2;
	width: auto;
	height: extend-to-zoom 100%;
}

@viewport {
	width: 480px;
	zoom: 2;
}

    I think the problem might be that the property name is “initial-scale” in the meta tag but it translates to “zoom” in the @viewport rule, and perhaps you were trying to use “initial-rule” as a property where you couldn’t.

    See Example 6 at http://dev.w3.org/csswg/css-device-adapt/

  • The topic ‘Suits: Modifying the meta viewport tag for iPhone’ is closed to new replies.