I'm having an issue trying to prevent the iPhone from resizing HTML e-mails to fit the screen. It seems that code below when put into the section has no effect.
My goal is just to stop the font re-sizing. I've tried other variations using -webkit-text-size-adjust:none; inline and in other way, all without success.
Would grealty appreciate any advice or an alternative solution.
#media screen and
(max-device-width: 480px){
/*fixes too big font in mobile Safari*/
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:none; } } </style>
The iPhone seems to be a pain when it comes to resizing things, especially when you switch the orientation of the phone. Have you tried adding the meta tag with viewport settings in it?
<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
It does prevent them from zooming, but I haven't found any better way to stop the iPhone from zooming on orientation change. I'm not sure if this will help in this situation, but just a suggestion to try out.
I been stuck w/ this problem and there's no available solution on the net that works.
Not until I realized what's causing this.
CAUSE:
This problem occurs if you have an image w/in the email. When the image auto-scale, the entire email/page will auto-fit in the window.
SOLUTION:
Add inline style for the image for min-width (300px so it doesn't take the entire 320px iphone width), max-width (your desired max with), and width of 100%.
i.e.
image src="image.jpg" style="width: 100%; min-width: 300px; max-width: 500px;"
Worked for me, ...hoping this can help you too! ;-)
What you are doing is correct but the problem is that rather than using -webkit-text-size-adjust:none; inside a style tag, you should use it in the below manner:
<body style="-webkit-text-size-adjust:none;">
This means you should use this as an inline css property.
To get rid of that problem you have to put the following in your CSS body tag:
-webkit-text-size-adjust: 100%;
This way Safari keeps the text to 100% of intended size. In case you set the value to none, the users won't be able to increase the font and this is an undesired behavior.
This CSS property is supported and should work.
Check the official Safari supported CSS reference:
https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html
Furthermore please note that the media type screen is supported in:
Safari 4.0 and later.
iOS 1.0 and later.
I hope this helps.
BR,
Tolis
A retina iPhone has a 640px width, your media query stops at 480px.
Anyway, you can get rid of the media query altogether. The only webkit based mail client that will use this property (-webkit-text-size-adjust:none) is iPhone's and iPad's Mail app.
Also the Mail app may also be the only client supporting CSS3
Related
Basically I am having the same problem as here, but because he never got a good answer I am reposting the question.
So the problem is that only in iPhone Safari the width="100%" on the portrait view seems to be misbehaving and giving the IFrame the landscape width. And I can't seem to figure out what is going on here.
I am using the correct viewport:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
And the site within the IFrame can actually go way narrower than 320px and also has the same viewport defined. (I've read on one of the similar questions that this can be a factor so I am just clarifying).
In the debugger I can see, that before the URL was added, the iFrame's offsetWidth was 304px which is correct and after the load it was 588px, which is correct for the landscape view. But why it changed I have no idea. The page within the IFrame comes from a different domain so that could not effect it and the main page does not do anything with the iframe's width.
The iPhone I am using is an iPhone 5 iOS 7.0.2
PS. Please do not post any JS answers where you resize the iframe manually on window resize, I am currently looking for a non JS fix, and this is my last option that I plan to use. Also please do no post the #media CSS answer were you set min-width to 320px on iPhone portrait view width, that would not work for me for various reasons.
OK so after hours of debugging I finally found the solution I was after, but unfortunatelyit is not a pure CSS solution:
The CSS you must apply is this:
iframe {
min-width: 100%;
width: 100px;
*width: 100%;
}
If you set the width to lower than the portrait width and set the min-width to 100%, then you sill get width: 100%, but this time a version that actually works and now the iframe takes the actual container width and not the landscape width. The *width: 100%; is there so that in IE6 the width would still be 100%.
However this only works with the iframe attribute scrolling="no", if the scrolling is allowed, then it does not work anymore. So this might limit it's usefulness in some cases.
It is answered here: iframe size with CSS on iOS
Simply wrap your iframe in a div with:
overflow: auto;
-webkit-overflow-scrolling:touch;
http://jsfiddle.net/R3PKB/7/
Is there a way to disable zoom on a div, or any particular elements on a website? For example, if I wanted the page to be zoomable, but not the #Header div, is there a way to make one zoomable, and the other not zoomable?
Basically, when you zoom on a mobile device, it zooms the Header too, but I want the header to be a fixed size at all times (not zoomable).
I know that you can use this code to disable zooming overall:
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
You can't do that without clever hacks.
However, you can (and should) use the following CSS to fix zoom issues on mobile devices:
header {
position: fixed;
...
}
#media only screen and (max-width: 720px) {
header {
position: absolute;
}
}
This code enables position: absolute when display width is less or equal 720px, and header becomes the part of the page, rather than being fixed on top.
I don't think you can do that directly. One possible option would be to detect the zooming through js events and scale elements accordingly.
Another option would be to "break" the CTRL key to disable zooming on your website, but that's just a big no-no.
In shorter, you certainly can do that.
You can trap window resize events and resize your floating div according to the dpi change calculated from the various new window and inner width and height attributes.
So, when you zoom in, you want to shrink the floating div so it retains the original dpi, and vice versa.
This would be an epic fiddle - revisit this answer soon, since I may have to do such a thing. Already noticing some cross-browser inconsistencies with dpi, so yeah, fun.
Faced the same problem an ended up disabling panning/zooming
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
</head>
and selectively reenable it with this great lib
https://soulfresh.github.io/pan-z/?path=/docs/pan-z--pan-z
Works great without much configuration.
My html-structure is as follows
<body>
<header>Sticky unzoomed header</header>
<main id='main'>Zoomable content</main>
</body>
Then I enabled panzooming on the main element
const PanZ = require('#thesoulfresh/pan-z')
new PanZ().init(document.getElementById('main'))
If you are using angular there is a way to give one id to your header div and then write the following code in controller:
document.getElementById("viewport").setAttribute('content','user-scalable=yes, width=device-width, minimum-scale=1, maximum-scale=1');
I used in my project and it worked well..
Here is a fiddle (jsfiddle.net/salman/RQBra/show/) that demonstrates the problem I am facing. The iframes appear as expected in all browsers (including Safari 5 for Windows). But when I viewed the page on two iOS devices (iPad and iPhone) the content of iframe overflowed and covered the entire area on the right hand side of the iframe. Here is a screenshot of a page that uses similar iframes:
How can I workaround this issue?
You can fix it in a div, but on the iPhone it won't be scrollable without some javascript. I've made a fiddle that shows how you can fix the size of the iframe.
http://jsfiddle.net/RQBra/29/
basically, you wrap your iframe in a wrapper and give it some css:
#wrapper {
position:relative;
z-index:1;
width:400px;
height:400px;
overflow:scroll;
}
A workaround for your specific case is to replace the <iframe> by an <embed> element.
<embed src="..." type="text/html" width="400" height="400"></embed>
It will have the desired effect on Safari Mobile and clip the content to the specified width and height dimensions instead of auto-sizing it. Hoewever, embed is not specifically designed for HTML content and unwanted effects may result when dealing with scrolling, contentWindow and different environments (it is not necessarily rendered natively), so test the case before using it in production.
W3C:
The element represents an integration point for an external
(typically non-HTML) application or interactive content.
Hmm, try to wrap the iframes in divs, but not constraining the iframe's width and height by themselves.
I am guessing inside Iframe there is an HTML file, so in HTML wrap the content in wrapper div
#wrapper {
position: relative;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
it's size will be relative to html body, than the viewportSizes may be as you wish
the second row is handling flickering on Iframe click, happens in ios'...
Ive set my fonts specifically as follows
* {font-size: 1em;}
html {font-size: 125%;}
body{font-size: 50%;}
p, ul, ol{line-height:1.7em; font-size:1.2em; margin-bottom:0.5em; }
Works fine on desktop browsers, and iPad (viewing is identical) - however the font size does not get any smaller on the iphone?
What am I doing wrong?
There are multiple solutions to your problem. Either apply the WebKit-specific text-size-adjust property:
html {
/* Prevent WebKit-based browsers from resizing the text: */
-webkit-text-size-adjust: none;
}
Or, you could define the viewport width in your HTML:
<meta name="viewport" content="width=device-width">
This tells the browser that it should use a viewport width equal to the device’s physical width. In most cases this prevents weird in-document text zooming inconsistencies, too.
I am creating a responsive website, and have just noticed a strange behaviour in my content pages when viewed on the iPhone. It scales correctly when loaded in portrait mode, and also when rotated to landscape. However, when rotating back to portrait the page seems to shift left, or not zoom correctly, and there is a strip of white space down the right-hand side. This white space also seems to be present on first loading in portrait as the user can swipe the page left
Rather than complicating the explanation any further, here's a link to a sample page where this behaviour is occurring. Have a look on an iPhone, then have a look at the home page which does not have this issue.
If you need to see anything further, just me know :)
Fixed it! The issue was coming from one particular div - to find it, it was a process of deleting the different elements until the issue went away.
To fix it I needed to add overflow-x: hidden to that div and it sorts it out! Hope this is useful to others with a similar issue.
I had the same problem, I fixed it by setting:
html, body { width:100%; overflow:hidden; }
This problem occurs when width of any division is greater than the width of iPAD's screen.
In my case, some divisions were having size of 1000px, so I just went for width:auto and it works. overflow-x:hidden also does the same thing, but is not a preferred way.
I don't have an iphone to test this on but I have come across something similar with websites I've created in the past. In my case its because there was a bug in safari mobile that messed with the scale when going from port to land.
The following code fixed it for me (can't remember where I got it from at the moment)
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
var viewportmeta = document.querySelectorAll('meta[name="viewport"]')[0];
if (viewportmeta) {
viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
document.body.addEventListener('gesturestart', function() {
viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
}, false);
}
}
Using "overflow-x: hidden" solves part of the problem, but screws the scroll, acting with strange behaviors (as Jason said).
Sometimes, the hardest part is to discover what is causing the problem. In my case, after a few hours, if found that the problem was in Twitter's Bootstrap:
If you're using Twitter's Bootstrap with "control-group" zones for your forms, the problem could be there. In my case i solved the problem with:
.control-group .controls {
overflow-x: hidden
}
Now the white space on the right was gone :)
I'd like to add to Navneet Kumar's solution because it worked for me. Any div tag styled with width=100% cannot also have left or right padding. The mobile browsers (I noticed the problem on iPhone and Android devices) interpret the div as having a width greater than 100%, thereby creating the extra space on the right side. (I knew this regarding fixed widths, but not percentage widths.) Instead, use width=auto in conjunction with padding.
I know it's a while since this topic was opened but I came across a similar situation and found it was because I had an element with the following properties right: -999999px; position: absolute; hidden off screen.
Changing the above to left: -999999px; position: absolute; solved the same issue the OP had (white screen to the right and ability to swipe right).
I'm using Bootstrap 3.3. I tried all of these solutions, and nothing worked. Then, I changed my <div class="container"> to <div class="container-fluid"> in the section that I was having trouble with. This solved the problem.
I tried all what has been suggested here, nothing works. Then I've relized that it connect with scale of page. So then I added <meta name="viewport" content="width=device-width, initial-scale=1.0"> to header.php in my main theme's folder and it 's fixed problem.
Seems as though results are varying for different circumstances but a sitewide
html, body { width:100%; x-overflow:hidden; }
seems to have worked for me!
Fixed!
Had a similar problem. Fixed it by setting the width to a current device width.
body, html {
max-width: 100vw;
margin: 0 auto;
overflow-x: hidden;
}
SOLVED ¡¡
Since installing protostar joomla template 3.X and start adding content in the module K2 I noticed that annoying scroll with a blank space on the right side, visible especially in iphones.
A correct partial answer was gave for Eva Marie Rasmussen, adding to the body tag in the file template.css these values:
width: auto;
overflow-x: hidden;
But this solution is only partial.
Search div class or label that is causing this problem and once detected add to that class in the file templete.css the same values:
width: auto;
overflow-x: hidden;
In my case add to the class "span" these two lines to finally look like this:
[Class * = "span"] {
float: left;
min-height: 1px;
margin-left: 20px;
width: auto;
overflow-x: hidden;
And it´s working now¡¡