Develop Reference

SweetAlert small on mobile devices, and Resize SweetAlert icons

I am linking to this SweetAlert library https://unpkg.com/sweetalert/dist/sweetalert.min.js, and when I display an alert on mobile, it displays very small. I have increased the text size, but the success, error, warning animations are very small. How can I resize these animations, or make the alert mobile friendly?
This is without CSS
And with CSS

Found the same thing....
2 options:
Add this in CSS:
.swal2-popup {
font-size: 2rem;
}
or
Use these links for your cdn... and it will work....(but its sweet alert1)
https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js
https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css

I got the same problem, because i forgot to include meta viewport tag...
try inserting this into head of your page
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Here are links for CDN for SweetAlert2:
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#7.12.15/dist/sweetalert2.all.min.js"></script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/sweetalert2#7.12.15/dist/sweetalert2.min.css'>
I got these links from here .

Change the viewport on one specific page

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. :)

Make website show as full page on iPhone

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..

can't get placeholder attribute to work in IE using iframe

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">

iOS 6: Safari overflow: hidden on containing div not working when modal open

I can't seem to use overflow: hidden trick on the body of my website in order to lock the background content when a modal is open.
I'm applying the current styles onto the body:
$('body').css({'overflow':'auto', 'position':'static'});
And they are being successfully applied, it works fine in Android, the background content locks, however in iOS devices, this doesn't work and the content background content is still scrollable. Any idea what would cause this?
This is the meta viewport tag I am using:
<meta name="viewport" content="width=device-width, maximum-scale=1">

iOS6 Webview requires overflow hidden on both the html and body element to work correctly. If someone wants to add it to the webkit bug tracker I'd be much obliged :).
Either this or the question here should be marked as duplicate.