Really, wondering and don't know why, on the initial load, the "<'p'>" element that holds content is scaled up, the fontsize, if i change orientation of the device it will then adjust scaling and keep it at declared font size that originally was intended, but that initial load. any ideas why?
I had a similar problem and the answer that worked for me was:
This is because sometimes Safari webview Zooms text automatically when
it thinks its a good idea.
To disable this behavior add this to your body CSS Style:
-webkit-text-size-adjust:none;
Are you sure loading CSS portion before content?
Related
I have a coverflow type image gallery that I have created for mobile picture viewing. The first iteration lives here: http://codepen.io/jasonmerino/pen/Fsloq.
I've wired up the touch events and all seems to be going well for mobile Safari on iPhone and iPad, but when I go to view it on Chrome for iPhone or iPad the images disappear during part of the CSS translate3d which moves the images to the sides.
I have added -webkit-backface-visibility: hidden; to all of the markup that comprises the swiper, which does not fix this disappearing act my images are doing.
What am I missing here? Any help would be appreciated. Thanks!
The problem was with the peice of code where I was removing inlined CSS translate3d. The code that I had in place dealt with removing the translate by just re-assigning the background images.
for (var i = 0; i < images.length; i++) {
$el.images.eq(i).css('style', 'background-image: url(' + images[i].src + ')');
}
In mobile Safari this was fine, but in Chrome the images reloaded when I re-assigned the background image, hence the disappearing act. So I adjusted my code to be a little smarter, and concise, so that I only removed the translate from the inlined styles.
$el.images.css('transform', '');
Turns out that when you pass an empty string as the value to a CSS attribute in jQuery they just remove the style out for you instead of leaving it there but blank. Makes sense, but I never knew that before.
Anyway, that's what fixed it for me.
In my app I load some webpages in a 480*320(landscape) UIWebView. But the text is too large, well really the whole content of the page is too big.
Is there some trick that you can do to scale down the whole page in the web view so that it does not seem completely out of proportion to the rest of the app?
I'm guessing there is not and that the only way is to get the HTML of the whole page and look for Font tags and change them all to something smaller and then loading it into a UIWebView.
Thanks for any suggestions or ideas you can offer,
-Code
The UIWebView property scalesPagesToFit should work:
myYebView.scalesPagesToFit = YES;
From the UIWebView documentation:
You can also use the scalesPageToFit property to programmatically set the scale of web content the first time it is displayed in a web view. Thereafter, the user can change the scale using gestures.
I'm trying to optimize our News pages for iPhone. One problem I've noticed is that I'm able to tap and move the page horizontally (i.e. wiggle).
My question is, how I can prevent this horizontal movement from happening?
All of our News pages have this problem. Here are a couple examples:
With picture
Without picture
Something is definitely set greater than your device width. Add the following to your css to find the culprit.
* {
border-style:solid;
}
You can then narrow down your search by setting border-color:red; to individual classes/tags/ids.
Add "overflow-x: hidden" on the body.
You can try setting user-scalable=0; and see if that has any effect.
This just happened to me too and it was the result of an extra closing div tag. Once I removed the extra </div>, the horizontal "wiggle" didn't happen any more.
I too, had the iPhone "wiggles" on a web page. It ended up being caused by an image that was wider than the column width it sat in (it was the last column in the row using Twitter Bootstrap). You might be thinking "obvious", but it's hard to spot when the image background matches the page background.
Just make the image responsive, or smaller than the column width - that solved it for me.
Taking the idea from other websites, most of big sites have a mobile site. look at those (the only one i know is facebook m.facebook.com) you can maybe see how the css is done. possible way of doing this is %. I would suggest to take out the sidebar for the mobile version. big pictures should be taken out or be resized so the browser doesn't have scroll bar side to side.
I am using the Jquery/Jqtouch libraries for an iphone compatible site. I am now stuck with a problem just in iPhone 4 (not in 2g, 3g or 3gs) where the text becomes blurry on one specific scenario. Below is how it happens
The site has one common div container.
<div id="container"></div>
The container is filled with content dynamically based on the user action. Below is the function that does that.
function loadPage(url, section, callback) {
$('#container').empty();
$('#container').load(url + ' ' + section, loadComplete(section));
}
One sample call to the above function
loadPage("Data.htm", "#Friends", null);
Basicaly eveything works fine except on one scenario where the amount the data on the container is huge (ie the #container height increases to 1500px+ not predictable). Now if i replace it with smaller data for different tabs on the same container then the text becomes blurry. Attached is the image
http://i.stack.imgur.com/XE9q4.png
Did anyone come across this scenario. Thanks in advance.
Try closing all your running apps besides safari. It sounds crazy but we have the same problem on the ipad and it just seems to be running out of memory at some point. Closing all the apps stops it. Other thing that seems to make a difference is -webkit-overflow-scrolling:touch, if it doesnt have this property then it doesnt seem to have the problem described.
i was able to fix this by applying the same settings to reduce flicker on the element in webkit browsers:
-webkit-perspective: 1000;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
Graphics elements must be "aligned" with the pixels on the screen; coordinates must always expressed as integral values and not floating values. If not, the subpixel rendering engine of the GPU would make it blurry, which is not a problem with animation but definitely one with static images.
In the native SDK, we have to make sure everything is aligned (such as using CGRectMakeIntegral()).
Since you're using a web framework, it's more difficult to tell how to exactly how fix the problem, but I would try to adjust the sizes of your to a precise size and not let the framework figure it out.
What content do you load? Images? Text? There's an internal limit on image sizes for the iPhone (about 4 Megapixels or so). It looks like the phone is trying to reduce the memory load of your website and reduces the resolution to non-retina values.
I can't say more without you posting code.
This is a shot in the dark, but have you aset your sizes using pt values for your block elements, and em for your text?
The iphone4 resizes your content to fit its higher-res Retina display (compared to the older iphone), and with that scaling i have sometimes noticed blur when using pixel values for block height, width, font size, etc.
Very hard to diagnose without seeing the actual code, but could be the issue.
In my case it was CSS
-webkit-transform: translateZ(0);
applied to one of the elements in body. So as Ariejan said, it's removing transition property that fixes it.
body{ text-rendering: optimizeLegibility}
could solve this issue, worth a shot if you haven't included it already
Sometimes, Text blurry may be cause of the iScroll Plugin. Did you use this?
Try to comment
trnOpen = 'translate' + (has3d ? '3d(' : '('),
trnClose = has3d ? ',0)' : ')',
if I change the frame of a UIWebView (scalesPageToFit property is YES), what do I have to do that the zooming level of a currently displayed webpage persists?
Let's say I have a UIWebView frame with a width of 200 pixels, and has zoomed into a website so that only one column is visible. After changing the width to 300, I still see the column with the same size, and additional space at the left and right. But what I would need is that I still only see this column, but bigger.
Any ideas what I have to do to achive this? I tried a lot of things, but nothing worked so far.
By the way, the iPhone built in Safari browser does exactly this thing (with the same website, so it's not content related) when rotating the iPhone... I see the same content, bug bigger, NOT more content as it happens with my current version of code.
Thanks for helping!
Markus
EDIT: Better answer:
mjdth is correct, you can use the contentMode property on the UIWebView. Very simple:
webView.contentMode = UIViewContentModeRedraw;
Old, crap answer:
This worked for me, but I was working with local pages and small amounts of content:
-(void)layoutSubviews
{
// Cause web view to reload content in order to display at new frame size
[webView reload];
}
I'd love to see a better solution that doesn't involve reloading the page though!
What do you have set for the webview's UIViewContentMode (can also be set in IB under the View section's "Mode")? Since you're resizing the view it may have something to do with this. Just a shot in the dark since I haven't tried it but hopefully this helps.
You may also want to try turning off scalesPageToFit before the transition and turning it back on after.