移动设备上的 SweetAlert 小，并调整 SweetAlert 图标的大小

Question

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

Answer 1

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

Answer 2

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 .

Answer 3

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