Hello, I need the same thing. I have set up all mobile rules in the stylesheet like this:
@media (max-width:767px) {/*mobile stuff here*/}
This is what I have now as the viewport:
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="HandheldFriendly" content="True" />
<meta name="viewport" id="viewport" content="width=device-width, target-densitydpi=device-dpi">
<script type='text/javascript'>
if (screen.width > 767) {
document.getElementById("viewport").setAttribute("content", "width=device-width; target-densitydpi=device-dpi");
}
if (screen.width <= 767) {
document.getElementById("viewport").setAttribute("content", "width=device-width");
}
</script>
<script type='text/javascript'>
(function() {
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);
}
})();
</script>
But the problem with this is that when I use is_mobile() throughout my code, is_mobile() does not necessarily mean <= 767 wide and I get bad results in some cases. I need to somehow match-up is_mobile() to mean <= 767…
Wondering if I can set up the viewport something like this:
<?php wp_head(); ?>
<meta name="viewport" id="viewport" content="width=device-width, target-densitydpi=device-dpi">
<?php if (is_mobile()) : ?>
<script type='text/javascript'>
if (screen.width > 767) {
document.getElementById("viewport").setAttribute("content", "width=device-width; target-densitydpi=device-dpi");
}
</script>
<?php if (!is_ipad()) : ?>
<script type='text/javascript'>
if (screen.width <= 767) {
document.getElementById("viewport").setAttribute("content", "width=device-width");
}
</script>
<?php endif ?><?php endif ?>
Note: I am excluding the iPad due to many reports of iPads getting the mobile version for an unknown reason. This is also a problem with a couple of Nexus tablets, so I thought if I just excluded tablets !is_tablet() then it would work, but it caused a lot of problems so I stopped using that.
Is something like this possible? Is there something I can modify in the plugin code that will allow me to add <= 767 to the list of things that mean is_mobile() ?
Thank you so much for reading. Any pointer in the right direction is appreciated.
