I have a painful issue CSS issue which appears to be caused by the Disqus CSS.
The Disqus CSS seems to cause my page's main content text to randomly change sizes in parts. Clicking refresh will randomly make some text bigger, some smaller and some bold. It only seems to occur in Safari on the iPhone (real and simulator) and is fine in Firefox, IE, Android and iPad Safari. Turning off Disqus comments fixes the issue. I have tried changing Disqus themes and turning mobile view on and off.
Below you can see the same page being rendered differently every time I click refresh (live site-it should look like this)
Any help would be greatly appreciated.
You could try applying the -webkit-text-size-adjust: none; and targeting the Disqus code? If I remember Disqus doesn't use iframes, so it should work if the hierarchy you use is stronger than theirs.
More info here:
http://css-infos.net/property/-webkit-text-size-adjust
Hope that helps :)
Edit: I just had a thought while writing that comment below. You may be able to sort this by setting the viewport width, either explicitly or to device width.
For example, this will make the viewport on an iphone be 320px wide in portrait and 460px wide in landscape (I think that's right?).
<meta name="viewport" content="width=device-width, initial-scale=1">
From the screenshots I think that is actually too small though, so something like this may be better.
<meta name="viewport" content="width=800, initial-scale=1">
This is actually why the text size changes in the first place. The iPhone scales that 800px to fit both portrait and landscape. In portrait though that could make the font far too small so it is increased.
See here for more info: https://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Related
When having a look at this site
this:
linebreaks correctly for small screens. It word wraps (adds a line break) for iphone 5c and ipad in landscape mode as well. Which is wrong. The sentence could finish in one line.
The font size seems bigger as well.
The word wrap / linebreak does not happen on my HTC One S in landscape mode.
Is there a tool that can help me figure out these irregularities?
Any idea what this problem is about?
Note: this gets used:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
EDIT I applied a fix on the website, so now I heard it looks fine. The answers given fix the problem (when applying 100% instead of none)
Apple devices (I might think also Chrome on Android devices do this as well) have a really funny way to render text on pages, the font increases in size automatically to retain the same "flow" in both portrait and landscape since it helps the user to do not lose track of the line it's currently reading.
The way to disable entirely the resizing is to use the following CSS rule:
html {
-webkit-text-size-adjust: none;
}
However this behaviour works only on mobile pages which are zoom fixed with the meta tag user-scalable=no and it breaks some desktop browsers while the desktop zooming
What you probably want is to keep the font-size constant through every zoom scale. If you add the following on your CSS, then you'll have what you're looking for.
html {
-webkit-text-size-adjust: 100%;
}
‑webkit‑text‑size‑adjust: 100%
Is the way to do it instead of
‑webkit‑text‑size‑adjust: none
Using none will break user zooming in various browsers.
Here's a good read about the topic: http://blog.55minutes.com/2012/04/iphone-text-resizing/
To build responsive and cross-device websites you can use online tools such as this emulator
However, in text case formatting and layout, a real emulator is needed.
X code can launch IOS sumulator and will give you a way to debug your local/remote website on any apple devices (smartphone and tablets).
By using this software, you will be able to understand/debug and correct your website.
Currently, all browser are more or less managing differently the rotating actions (lanscape<->portrait) and also fonts. So, I won't look exactly the same but your website will be very similar across all browsers.
In your case, first you need to stop all browsers to resize your text on rotation.
Simply add the following CSS code.
CSS
html, p, a {
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
}
By the way, I checked your line break issue. Every thing is working on Iphone 4/5 on Ios 6X and Ios 7X.
But any way, you need in the future to check your website on IOS simulator
Here is a screenshot from safari for an Iphone 5:
I have a CSS layout for a web-based game that was designed to fit the iPad screen only (it's running inside an iPad app). Now I want to port that same game to the iPhone. If I simply run the app using the iPhone 5 simulator, it will just show me a 320x568 section of the screen.
I was wondering if there was a way to (automatically?) shrink down every component on the page to be smaller and fit the iPhone 5's screen. There's lots of images that were designed with the iPad's resolution in mind, so they're bigger than they should be on the iPhone. Can these be resized by the CSS depending on the screen size or would I need to resize them all manually?
In the index.html file I already have included:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
It won't size automatically to the iPhone's screen however. There's also a lot of hardcoded pixel values. Can I simply change those to a percentage that's relative to the screen?
For the record, I didn't write this code, and am not THAT good at CSS. Thank you for your help.
You can checkout this website for help... You can study how to fit a layout as per device size.
http://alistapart.com/article/responsive-web-design
Don't blame if the link expires;-)
My site has a fixed layout with a size of 1090px.
When I use this meta tag:
<meta name="viewport" content="width=device-width, maximum-scale=1">
the page will load zoomed in. Not all the way though (roughly 300px in width are out of view).
Also, you can not zoom the page out far enough to see the whole thing.
Shouldn't the width=device-width solve that?
So I tried an initial-scale of 0.29, which worked fine for the iPhone. But when loading the site on an iPad, it would obviously be way too small.
How can I fix this?
UPDATE:
So I just figured, that the width seems to be defined by the height of my page.
Safari on the iPhone fits the height in the viewport and doesn't care about fitting the width, also won't let you zoom out to see the whole width. It seem like if the page would be higher, you could see more of the width.
The width is just fine in landscape.
If your design is not responsive, It is better to target particular device resolution like for 320 width I would go for <meta name="viewport" content="width=320">
I have also noticed that content set as device width tend to break on ios 4 safari. I am afraid it's not the problem of ios safari it's the non-responsive design that causing the problem.
Also if the design is not responsive, then using this combination is worst
user-scalable=no or maximum-scale=1 with initial-scale=1
playing with initial scale will not solve the problem for all the devices.
I asked a question and received an answer regarding sizing images for mobile browsers.
The answer provided works for inline images. However, I need to use background images as part of a header, as well. They're set via css classes. On android, they scale correctly in both portrait and landscape, but on iPhone they automatically zoom in when turning from portrait to landscape. This is a problem. I have a viewport tag set like so:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
Apparently when the iPhone (at least the newest versions) are turned to landscape mode, it rescales and zooms in really huge, rather than just repeating the background more times to account for the wider screen.
Here's what my code looks like:
<tr><td colspan="2" class="logoHeader"><img src="/images/mobile/logoCopy.png" /></td></tr>
where class logoHeader looks like this:
td.logoHeader {
background: url(/images/mobile/transparentLeavesRight.png) top right no-repeat,
url(/images/mobile/transparentLeavesGradient.png) top left repeat-x;
text-align:center;
}
Any ideas? I know that I can add the user-scalable property of the viewport meta, but we don't want to prevent users from manually zooming if necessary. We just want to prevent it from automatically zooming when the phone is turned into landscape mode.
FYI: I did search and found this and this, which are pretty much asking the same question. But they're both a number of months old, and neither has an actual answer to the problem, so I'm hoping that someone has come up with something in the interim.
to avoid rescaling when orientation changes try
<meta name='viewport' content='width=1024' />
and adjust width for your needs. If this won't work on android correctly, you can always send different viewport tag by PHP+user agent detection, or set it on device by javascript.
Change the viewport to:
<meta name="viewport" content="width=device-width, initial-scale="selfrender"/>
is it possible to add an iframe to an iphone web page. I tried adding a standard iframe with height and width 100% however when i use them to display them in the simulator from the local files i cant scroll even after setting scrolling to auto. IS this a limitation of the simulator or am i making a mistake somewhere. im using this code
<iframe src ="http://moodle.acs.gr" width="100%" height="90%" scrolling="auto">
iframes.
I also have problems with an iPhone and iframes, and this is on a normal iPhone, not a similator. I don't think you can scroll within iframes at all on the iphone browser. You'll have to do things with the <meta name="viewport" or iframe width/height to get it to work