I am using mathjax for loading the mathematical function, while i am loading the html content into the UIWebView some of the content color will br changed into blue color,
But i load the same html content into the browser means, it is displaying correctly
Please share if anyone have any idea about this issue,
Thanks in Advance...
In iOS, Webkit tries to recognize phone numbers and turn them into links. I'm wondering if your stacked fractions of small integers look like phone numbers to iOS. Are the blue ones acting as links, and if so, to what?
You can disable this phone-number-recognition feature by adding
<meta name="format-detection" content="telephone=no">
to the <head> of your document. Hope that takes care of it for you.
Related
I'm having an issue with getting Googlebot to correctly render my webpage(s).
It's rendering the header and one "row" of my page (just the page's top background picture), and then failing to render anything beyond that, not even the footer, missing about 3/4 of the page.
My site is www.runparis.fr and screenshots of the rendered fetch are attached.
Other potentially relevant information includes:
The code that was fetched is missing nothing
The fetch status is complete (no missing resources)
The problem is site-wide; it happens on all my pages
When I check the cache the whole page is rendered perfectly
Fetch as Google (mobile) renders the site perfectly
The site looks fine in any of my browsers
There's nothing funky going on in my page; It's just background images and text. Easy stuff.
My questions are:
Will google's inability to render the page have an impact on how Google ranks it?
Is there any advice for solving the problem and having google render the page correctly?
Thanks for any help or advice anyone can offer!
Googlebot render 2
Edit:
I've done another Fetch as Google and render for a test page and found that Googlebot will stop rendering after it has rendered any background images that I've set to "full height" in my page builder in my Wordpress installation; that is, any image that is set to take up the full height of the browser window kills the render.
So, it will render everything until it hits this image, renders that, and then stops.
As stated before, my page isn't fancy; It's just simple background images and text. It surprises me that Googlebot has trouble rendering what any browser can render perfectly, especially given the simplicity of the pages!!
So, my questions are:
Will Google not being able to render my page impact the way Google ranks my site? (given that what's in the cache renders fine on my browser)
And, Is this a common problem? Are there any fixes that will let Google render my pages correctly?
Some new information supplied by an external source:
"validator.w3.org/nu/?doc=http%3A%2F%2Frunparis.fr%2F"
"jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Frunparis.fr%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en"
The various errors and warnings might explain why rendering is hampered in some tools such as Google Fetch and render.
Browsers are much more forgiving than all these validation and rendering tools.
I'm guessing that in Google's rendering tool the css rules that set the background image(s) and foreground image(s) and text content are being applied in the wrong order so background stuff ends up on top of foreground.
Does this new information help anyone understand why Googlebot would be having trouble to render the page?
I have experienced the same problem, the only viewable thing on the renderer was the hero section, and it was caused with defining height:100vh; for the hero section.This problem occur when using vh css units, or in some cases height:100%;
Here is the thread and discussion that really helped me out to understand the issue:
I believe that the google bot is doing this:
1. Looking at your website with a 1024x768 viewport.
2. Checks how tall the window.scrollHeight is
3. Resizes it's virtual browser to be the same height as the window.scrollHeight
4. Takes a screenshot and
5. Checks to see what elements are visible, and tallies SE score as appropriate. (Dinging content that is not visible.)
I partially solved this issue with inserting extra rules into mediaqueries: So for resolutions around 1024px width, I put max-height:800px; (rule height:100vh; stayed active) on my hero section, and on mediaquery for rules around 1280px width and up, I set max-height:none; (rule height:100vh; is active).
I'm still loosing around 30px of height in the renderer, but that's being cut off at the end of the page, with no text and any meaningfull content.
I have the similar issue with (Google Mobile-Friendly) tool and (Fetch as Google) mobile version is broken because Googlebot is not loading my style.css and affect my rankings
so I output my stlye.css code for mobile manually
add_action('wp_head','load_mobile_styles');
function load_mobile_styles () {
if( wp_is_mobile() )
{
ob_start(); ?>
<style>
enter code here
</style>
<style>
enter code here
</style>
<?php
echo ob_ob_get_clean();
}
}
I have a personal live site at http://brunomoreira.net based on the great Touchfolio theme (http://dimsemenov.com/themes/touchfolio/) for Wordpress.
Since I don't know LESS, I've changed it to use a regular style.css stylesheet.
Everything looks fine except when viewing the "Projects List" (http://brunomoreira.net/projects-list/) section on a iPhone. The masonry blocks appear slightly padded to the right and that makes them not appear 100% visible on the iPhone screen (and it lets me swipe to the right, which shouldn't be possible).
I believe it may be a problem with margins or padding in the CSS or in the masonry code itself, but can't figure it out.
Any help appreciated,
thanks.
Bruno
On the mobile version you should remove the padding from:
#primary { padding: 0!important; }
I am creating a new iphone apps using phonegap(cordova).I had one problem on my app.If i click anyone input field the iphone keyboard is popup and also whole page positon was changing. Like the fixed footer is popup above the keyboard.Please guide me.
Thank you
This is a difficult problem to get 'right'. You can try and hide the footer on input element focus, and show on blur, but that isn't always reliable on iOS. Every so often (one time in ten, say, on my iPhone 4S) the focus event seems to fail to fire (or maybe there is a race condition), and the footer does not get hidden.
After much trial and error, I came up with this interesting solution:
<head>
...various JS and CSS imports...
<script type="text/javascript">
document.write( '<style>#footer{visibility:hidden}#media(min-height:' + ($( window ).height() - 10) + 'px){#footer{visibility:visible}}</style>' );
</script>
</head>
Essentially: use JavaScript to determine the window height of the device, then dynamically create a CSS media query to hide the footer when the height of the window shrinks by 10 pixels. Because opening the keyboard resizes the browser display, this never fails on iOS. Because it's using the CSS engine rather than JavaScript, it's much faster and smoother too!
Note: I found using 'visibility:hidden' less glitchy than 'display:none' or 'position:static', but your mileage may vary.
So, I've been using this little bit of Javascript (as a bookmark) to increase the font size of various websites I visit on my iPhone's Safari browser (zooming in leads to too much scrolling from side to side).
http://www.everythingicafe.com/forum/iphone-software/increase-font-size-in-safari-without-zooming-9511.html
javascript:for(i=0;i<document.getElementsByTagName ('*')
.length;i++)void(document.getElementsByTagName('*' )
[i].style.fontSize='18pt');
However, this doesn't work on any of the StackOverflow sites. Any suggestions on how to fix it?
Poking thru the CSS in FireBug doesn't give me many clues except for a font-size: 100% that is in the p tag.
I tried changing fontSize='115%'); and it changed some of the text but not the question/answer body (the most important stuff!)
Stack Overflow uses relative font sizes for everything.
Here is a simple fix to adjust the font size for the entire document:
javascript:void(document.body.style.fontSize = '16pt');
How do I replicate the effect that the app launcher uses on a square .png to show my users what their icon will look like as an app badge.
NB - I want to do this in code on the iPhone, not in photoshop on my computer.
Thanks!
edit: trying to be really clear here. How do I do this with code!
I have tried creating an overlay, but the shine apple does actually brightens the top, so just putting a png over the top will not give the same effect.
Presumably the app launcher applies some CA effects - does anyone know how to duplicate them???
Create a transparent shine overlay in Photoshop on your computer and merge the two images in code.
Short of hard-coding the shine mask, or building a mini ray-tracer, that's probably the easiest way to do it.
There's even a link to a photoshop tutorial/template here:
http://www.keepthewebweird.com/iphone-icon-psd-template/
Another more simple approach is to save your icon as a 57px x 57px PNG called "icon.png" without any shine effects, then FTP it to the root folder of a web server and create a file there called icon_test.html containing the following code:
<html>
<head>
<link rel="apple-touch-icon" href="/icon.png"/>
<title>The App Name</title>
</head>
<body>
iPhone test page
</body>
</html>
Then just browse to the icon_test.html file in mobile Safari on your iPhone, tap the "+" button in the toolbar to save the page as a bookmark, tap "Add to Home Screen", and tap "Add" in the top right. You'll then see your icon appear on the home screen, complete with Apple's shine overlay.