I need to make one specific page on my site respond to screen sizes with the viewport meta tag. The viewport meta tag is generated by a php file in the back end.
Currently my viewport tag looks like this:
<meta name="viewport" id="viewport" content="width=1040"/>
I'm using this jQuery to edit the tag:
jQuery(document).ready(function(){
jQuery('meta[name="viewport"]').attr('content', 'width=device-width, initial-scale=1.0');
});
In hopes the viewport tag will turn out like this:
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0"/>
I don't identify a page in the jQuery because I have a plugin that lets me run scripts on individual pages. To be more specific, my CMS is Wordpress, my themes are Genesis and the Genesis Sandbox, I'm using an SEO by Yoast plugin, as well as Gravity Forms. How would I go about changing the viewport meta to my desired code?
Try this ... simple, but reasonable solution for sites that are heavily coded.
1. If you are using "meta viewport" tag in "head" then, below script will work.
jQuery(document).ready(function(){
jQuery('meta[name="viewport"]').prop('content', 'width=device-width, initial-scale=1.0');
})
2. If "meta viewport" tag in "head" is not present then, use the following script.
jQuery(document).ready(function(){
jQuery("head").append('<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0"/>');
jQuery('meta[name="viewport"]').prop('content', 'width=device-width, initial-scale=1.0');
})
Note: Be sure that you are using "jQuery library version 1.6+" in your webpage.
According to me.. It will definitely work. :)
Related
I'm having trouble with a mobile page that uses a site of ours in an iframe.
It works fine on desktop but on mobile the page doesn't resize correctly. Based on internal testing it seems that the page is missing this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Is there any way to set that via jQuery and have it actually take effect?
In theory I believe that using this SO article I could inject the meta tag like this:
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">');
But it seems the problem really comes down to forcing it to re-parse the html. Is there a way I could do that?
Yes you can append a meta tag, but no you can't force reparsing of the html. The browser is going to ignore any changes you make.
I have a site create in bootstrap responsive layout, for some reason, i need to stored data at different server
on my original server I create a page with iframe width:100% height:100% to cover whole page.
My problem is the page doesn't display mobile phone's layout inside of iframe
anyone know how to solve this problem?
Try using this meta tag inside the head area of your iFrame page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I have this:
<meta name="description" content="NEED_TO_UPDATE_THIS" />
<meta name="keywords" content="" />
and i need to update the content of meta tag that has the name="description" using jQuery. How can i use the selectors to choose that content atribute of that tag?
thanks
$('meta[name=description]').attr('content', 'new value');
Although doing this doesn't make much sense because web crawlers which use this tag usually don't support javascript.
This will make sense when you are using phantom js and prerender the js pages for seo and proxy the bots to the pre-rendered pages instead to the live site.
I am trying to make a website display as a full website whenever it is accessed by an iPhone (or any other phone, hopefully, but iPhone is the spec).
I do not want the page to try to be responsive at all. I want it to look just like the large-screen website, and be useless.
I am using the Genesis theme in Wordpress, but I am open to regular old JavaScript solutions.
The theme sets the viewport to device-width. On an iPhone, that would be 320.
<meta name="viewport" content="width=device-width, initial-scale=1">
You'll want change the meta tag to the width of a full web site, for example, 1200...
<meta name="viewport" content="width=1200, initial-scale=1">
It should then render as if the window were 1200 wide.
Docs: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
use a UIWebView and set the frame like self.view.bounds then it will set the frame to the entire page based on device you used..
iframe in a wordpress, placeholders don't show in IE, BUT they show just fine if you load the iframe directly in IE
http://uslegalsupport.com/contact-us-new/ this is the link with the iframe on the page:
here's the link of JUST the iframe:
https://www.uslegalsupport.com/wp-content/themes/us-legal/ifpage-contact-us.php
this is literally driving me insane...plz help!
Try forcing the latest rendering engine with IE=edge in both the frame and its parent.
<meta http-equiv="X-UA-Compatible" content="IE=edge">