I feel like I must be missing something incredibly simple. Whenever I attempt to implement Stripe's Checkout feature on a mobile site, the payment button appears very, very small.
I stripped everything away that might be causing styling issues and then just started using their basic embedded form just to see and I still get this problem where it just doesn't appear optimized for a mobile format.
What am I missing here?
<html>
<form id="buy" action="backend/create_subscription.php" method="post">
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_SOMEKEYHERE"
data-amount="2000"
data-name="Widget"
data-description="Some widget"
data-image="/img/marketplace.png"
data-locale="auto"
data-shipping-address="true"
data-label="Option 1"
data-panel-label="Subscribe"
data-bitcoin="false">
</script>
</form>
</html>
Image of the tiny button on mobile
This isn't a button issue, it's a scaling issue. You might want to try this in your <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
That should (probably?) help with scaling. You could also do a Custom integration and that will allow you to use whatever button you want to trigger it.
My dotnetnuke website looks fine in IE9 but breaks in IE8 & IE7.
I've tried the meta tag :
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
but if i put it in the ascx ( 1st line ) but it doesnt show up. And if i put it in the page setting - tags , it shows up at the bottom of the header. So it also doesnt work that way, how to get the tag on top or is there any other way?
Thanks in advance.
You can use some code to add the directive. In your skin (or, in a control that is references by each skin control), add the following:
<script runat="server">
private void Page_PreRender(object sender, EventArgs e)
{
var meta = new HtmlMeta();
meta.Content = "IE=edge";
meta.HttpEquiv = "X-UA-Compatible";
this.Page.Header.Controls.AddAt(0, meta);
}
</script>
This requires that AutoEventWireup is true in the Control directive. Otherwise you'll also need to override OnInit or something like it to manually wire up the event.
I hate to suggest this, but you might need to add this to default.aspx in the root of your website, if you do this though, you'll need to remember to do it again when you upgrade DNN in the future.
I haven't seen this done before, but this is how it was done for emulating IE 8/7 when using IE 9:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
If not, then try this one:
<meta http-equiv="X-UA-Compatible" content="IE=9">
Add those to your header with the other meta tags. This should force IE10 to render as IE9.
How can I disable zoom-in and zoom-out capability in responsive design pages while using iPad, iPhone and/or some other smartphone.
Is there any way to control it?
Create a META viewport tag, and set the user-scalable property to 'no', like this:
<meta name="viewport" content="user-scalable=no" />
Updated answer:-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
This pretty much discriminates against anyone over 30, suppressing zoom just forces them to use reading glasses. Which may be your intent.
One of the workarounds for such users is to use RDP or VNC to view a desktop browser and "pinch" the view of that.
Question should maybe read "how to disable" or "how to suppress".
You should of course discern your devices using the user agent string.
To Disable Zoom Please Add this Script
<script type="text/javascript">
document.addEventListener('touchmove', function (event) {
if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
</script>
Firstly, I've done some Google'ing and found the IE 'conditional comment' and understand it's non-standard. I also get the impression there is no standard HTML 'IF' so my question is about what I need to do to achieve the same effect (Javascript perhaps?)...
I'd like to conditionally include an external .html file (from a selection of external .html files). Specifically, the external files each contains nothing but a <meta> element on a single line. Alternatively is it possible to have multiple inline <meta> elements in a HTML file and to 'choose' one conditionally (effectively ignoring the others)?
Basically, can I do something that would achieve the same as one of either of these pseudo code examples?
Example using pseudo code for external files...
<html>
<head>
if some-condition
<!--#include file="meta1.html" -->
else
<!--#include file="meta2.html" -->
...
</head>
...
</html>
Alternative example (again pseudo code) for selecting alternative elements directly...
<html>
<head>
if some-condition
<meta name="viewport" content="abc" />
else
<meta name="viewport" content="def" />
...
</head>
...
</html>
NOTE: In all cases the <meta name attribute will always be viewport - it's just the content attribute which needs changing perhaps with some other attributes.
EDIT: The main condition would be the type of client. One example is that to help correctly size web app pages on an Android device you can use certain content data for the viewport that only Android devices understand. For conventional browsers, I would set a default set of data for content (for width/height for example). This could also be expanded for other clients such as Google TV, iOS etc etc.
Using Javascript:
document.head.insertAdjacentHTML( 'beforeEnd', '<meta name="viewport" content="abc" />' );
Demo: http://jsfiddle.net/ThinkingStiff/ccX5p/
You could do this with javascript / jQuery quite easily.
Set your conditions and then append() to the head.
Example:
if(//condition here){
$('head').append('<meta name="viewport" content="abc" />')
}
else{
$('head').append('<meta name="viewport" content="def" />')
}
if you are using a server side, like asp or java, the thing becomes lot easier for you.
i shall consider you are not using server side coding.
use javascript for getting the browser name (navigator.appname I guess).
then you may use DOM to add <meta ..../> tags inside <head> element.
document.getElementsByTagNam('Head').appendChild(metaChild);
I've tried all three of these to no avail:
<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />
<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;” />
<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;” />
each are different values I found recommended by google searching or SO searching, but none of the 'user-scalable=X' values seem to be working
I also tried comma delimiting the values instead of semicolon, no luck. Then I tried ONLY having the user-scalable value present, still no luck.
UPDATE
Got this from Apple's site and it works:
<meta name="viewport" content="width=device-width, user-scalable=no" />
it turns out that the problem was the non-standard quotes because I had copied the meta tag from a website that was using them, whoops
Edit: may not work after iOS 10, please see touch-action based solution below.
Your code is displaying attribute double quotes as fancy double quotes. If the fancy quotes are present in your actual source code I would guess that is the problem.
This works for me on Mobile Safari in iOS 4.2.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
For the people looking for an iOS 10 solution, user-scaleable=no is disabled in Safari for iOS 10. The reason is that Apple is trying to improve accessibility by allowing people to zoom on web pages.
From release notes:
To improve accessibility on websites in Safari, users can now
pinch-to-zoom even when a website sets user-scalable=no in the
viewport.
So as far as I understand, we are sh** out of luck.
#mattis is correct that iOS 10 Safari won't allow you to disable pinch to zoom with the user-scalable attribute. However, I got it to disable using preventDefault on the 'gesturestart' event. I've only verified this on Safari in iOS 10.0.2.
document.addEventListener('gesturestart', function (e) {
e.preventDefault();
});
Using the CSS touch-action property is the most elegant solution. Tested on iOS 13.5 and iOS 14.
To disable pinch zoom gestures and and double-tap to zoom:
body {
touch-action: pan-x pan-y;
}
If your app also has no need for panning, i.e. scrolling, use this:
body {
touch-action: none;
}
for iphones safari up to iOS 10 "viewport" is not a solution, i don't like this way, but i have used this javascript code and it helped me
document.addEventListener('touchmove', function(event) {
event = event.originalEvent || event;
if(event.scale > 1) {
event.preventDefault();
}
}, false);
I got it working in iOS 12 with the following code:
if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
window.document.addEventListener('touchmove', e => {
if(e.scale !== 1) {
e.preventDefault();
}
}, {passive: false});
}
With the first if statement I ensure it will only execute in iOS environments (if it executes in Android the scroll behivour will get broken). Also, note the passive option set to false.
I managed to stop this behavior by adding the following to the HTML header. This works on mobile devices, as desktop browsers support zooming when using the mouse wheel. It's not a big deal on desktop browsers but it's important to take this into account.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
and the following rule to the CSS stylesheet
html {
-webkit-text-size-adjust: none;
touch-action: manipulation;
}
Actually Apple disabled user-scalable=no on latest iOS versions.
I tried as guideline and this way can work:
body {
touch-action: pan-x pan-y;
}
user-scalable=0
This no longer works on iOS 10. Apple removed the feature.
There is no way yo can disable zoom website on iOS now, unless you make gross platform app.
Try adding the following to your head-tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
additionally
<meta name="HandheldFriendly" content="true">
Finally, either as a style-attribute or in your css file, add the following text for webkit-based Browsers:
html {
-webkit-text-size-adjust: none
}
This works fine in IOS 10.3.2
document.addEventListener('touchmove', function(event) {
event = event.originalEvent || event;
if (event.scale !== 1) {
event.preventDefault();
}
}, false);
thank you #arthur and #aleclarson
In Safari 9.0 and up you can use shrink-to-fit in viewport meta tag as shown below
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
sometimes those other directives in the content tag can mess up Apple's best guess/heuristic at how to layout your page, all you need to disable pinch zoom is.
<meta name="viewport" content="user-scalable=no" />
As mentioned this solution basically works as of late 2020:
document.addEventListener(
'gesturestart', (e) => e.preventDefault()
);
But the downside is that while you are scrolling you'd still be able to pinch and then it gets stuck.
The solution is to disable scrolling.
body {
overflow: hidden;
}
But, what if you still wanted the page to be scrolled?
You can still do it with another <div> set as overflow:auto:
<body>
<div id='app'></div>
</div>
and then
body {
overflow: hidden;
}
#app {
-webkit-overflow-scrolling: touch;
height: 100vh;
height: -webkit-fill-available;
overflow: auto;
}
I tried all above things but this worked for me on IOS devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height, minimum-scale=1.0, user-scalable=0">
As of today (Oct. 2022) with iOS 14.8, the ONLY way I could completely prevent the double tap zoom was this:
document.addEventListener("click", (e) =>
{
e.preventDefault();
})
Even this:
* {
touch-action: none !important;
}
(which is obviously not realistic, but just for demonstration purposes) wasn't enough in every case. It turned out that any for element on which I had handled click, double tapping on it would cause a nearly irreversible zoom-in, completely ignoring the touch-action setting. But if I called preventDefault() in the click handler, it would not zoom. So, doing this at the document level so far seems to be enough, so that I don't have to do it every time I handle click.
I have no idea what side effects this might have, but I'm sure folks will chime in if they think of any.
In order to comply with WAI WCAG 2.0 AA accessibility requirements you must never disable pinch zoom. (WCAG 2.0: SC 1.4.4 Resize text Level AA). You can read more about it here: Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile, 2.2 Zoom/Magnification
I foolishly had a wrapper div which had a width measured in pixels. The other browsers seemed to be intelligent enough to deal with this. Once I had converted the width to a percentage value, it worked fine on Safari mobile as well. Very annoying.
.page{width: 960px;}
to
.page{width:93.75%}
<div id="divPage" class="page">
</div>
This one should be working on iphone etc.
<meta name="viewport" content="width=device-width, initial-scale=1 initial-scale=1.0, maximum-scale=1.0, user-scalable=no">