Web page rendering incorrectly on mobile Safari and mobile Chrome - iphone

I wanted to see if anyone else had ever had an issue with Mobile Safari or Chrome causing web pages to suddenly spit out a ton of garbage.
The issue occurs when I visit the site & refresh multiple times. Suddenly, none of the content renders correctly, but instead looks more like the type of glyphs you'd see in Microsoft Word.
Has anyone ever seen this before and, if so, how did you resolve the problem?

I have seen it on iPhone and Android. On iPhone I suspect its due to the interruption during the page load (getting kCFURLErrorCancelled on the didFailLoadWithError method). Though I am still looking to confirm this issue and still looking for a solution ...

You should check the character set of the HTML page. Bases on your language or the special characters used in the page, you should use the apt charset. You can learn more about charsets here
http://www.w3schools.com/tags/ref_charactersets.asp
http://en.wikipedia.org/wiki/Character_encodings_in_HTML
http://en.wikipedia.org/wiki/UTF-8

It is really difficult to tell anything from what you have posted. You should check the meta tags of your page. I would suggest you validate the html source and css of the page here .

Related

facebook scraper stops reading my meta data [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Facebook won’t share a link to my site
I have 2 websites that fail to show an image when pasted into facebook. So I went to the facebook object debugger and compare what the scraper sees to what view source sees.
http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fvspwebandvideo.com%2F
Both of my failing pages dies on the line:
Because it gives no error, it just stops reading at that point, I am clueless as to what to try.
Any ideas? I wondered if the title tag having html entities would have an effect.
paxtonsgrill.com fails as well, but allaroundloveland.com works. All 3 are wordpress sites, but I am a PHP developer so if I can figure out what is wrong, I can most likely fix it.
Thanks
The problem is with your site's Charset.
If you click on See exactly what our scraper sees for your URL link on their page, You should notice their scraper breaks at <link rel="alternate" type="application/rss왩"> (After rss its actually a + on your site) and checking your site's source code, I see you have utf-7 charset.
So i did a quick test and i can confirm its the character encoding issue. Just change it to utf-8 and everything should be working fine.
Also if you check your allaroundloveland.com site's source code, you can see it has the right charset but whereas your other sites have wrong charset (Idk if you added that yourself for some reason? but their scrapers are breaking with that charset).
Hope this helps and let me know if its working for you.

Rest Console for Chrome won't let me input any info

I installed the Rest Console extension onto Chrome. I can't use this Rest Console for anything, because the only fields that accept text are 'Request URL' and 'Request Method'.
I ask here as there is no resources or community accessible for even simple instructions on how this extension works, and there are likely members of this community who have used this extension.
Use the Postman - REST Client it works perfectly!
your_url_to_post: Fill the URL
your_json_param: The name of the param that you'll pass you json
your_json_data: The json content
Don't forget to select x-www-form-urlencoded if you'll do a post
http://i.stack.imgur.com/TISW1.png
You should be able to enter text in the other field if you tick the checkbox associated to the field first.
I started having a similar issue myself (Forms wouldnt let me input data I could click them but thats as far as it went) across a lot of web pages to include my own php game and I know the form code hasnt changed at all before this issue started. I came across a article of someone else having a similar issue themselves that I was having and someone said that they needed position: relative on their forms that are not given specific instructions on positioning when dealing with google chrome. I have since made this change myself at www.immoralattack.com and the issue has stopped on that site but still continues on many others so its pretty safe to say that is the issue.
Its only happening on the dev build of chrome for me atleast and I hope this isnt something they plan on implementing on live or this will mess up alot of websites.
Also try turning off auto fill from chrome if its on, while I was looking for this bug I found alot of similar bugs but they delt with auto fill being on.

Accurate browser detection/redirect possible using JavaScript?

Please forgive me if this answer is somewhere else on this site or online. If it is, I sure haven't found it in the past several days of searching.
What I am hoping to find is an "accurate" method of detecting a browser and redirecting to a simple, static page if not a recent browser.
The samples I have found until now often have not provided an accurate representation of the actual browser being used. For instance:
When testing with Navigator 9, I'll get a message that I'm using Firefox 2
When testing with Maxthon 3, it reports I'm using IE 9.
My site displays correctly in all the current browsers I've been testing it with. But I wish I could have a basic static page for those .01% who still are using an old browser for whatever reason. They could still get some basic information from my site, as well as encouraged to update to a more current browser.
If anyone has any useful suggestions, I'd greatly appreciate them.
Thanks so much.
Cheers,
David
Browser detection is never perfect, for a variery of reasons. If you are using jQuery, you should look into jQuery.browser.
I'd try to detect the browser on the server side and do an HTTP redirect if the browser is something non-standard. Most decent frameworks have functionality to detect the browser from the user agent string. Again, this is not perfect, mainly because of the data browsers report. Also, if Maxthon reports it's IE, that's because it is based on IE and therefore the layout engine should be the same.
So you either
support a small number of browsers and cater for their quirks, sending all other browsers to a basic page (this sucks for future versions of browsers because they might be standards-compliant but they will still display your very basic page), or
you have a standards-compliant page for all browsers and then you define alternatives for the ones that give you problems.
I'd go for the second option. It usually all boils down to one version for all browsers, and a number of hacks for various versions of IE. Also, remember to avoid padding in your CSS and use margins instead.
In the end, you probably shouldn't be testing for browsers and version numbers, but supported features. Try using Modernizr.
The $.browser property is deprecated in jQuery 1.3. On jQuery support site, they strongly recommend to use the detection feature (JQuery.support) instead of the jQuery.browser property.
Actually, this has been answered already in another question, please check here How can you detect the version of a browser?

iphone html app - cross site xmlhttprequest?

On an iphone, you can add a favourite when on a webpage and if that webpage has the correct meta tags for iphone, it gets an icon and can even 'hide' the browsers chrome and display just like an App. With html5 http headers you can even have the phone completely cache the 'app' so that it never has to contact the server again.
The problem I have is that I want to write apps that make xmlhttprequests to a server that is not the server they were originally from. I heard its possible to do this if you somehow export your favourites and HTML5 chache then manually edit the export file to change the URL for the favourite, then import them again, so that the phone doesn't think the javascript is trying a cross site xmlhttprequest.
However I have not found anything like that (maybe it was a jailbreak thing?). At the moment I have to have a proxy on the server where the 'app' originally came from, which is obviously very annoying.
I also heard that there was a special meta tag that allowed you to specify one other domain for xmlhttprequest, it had something to do with specifying that the page was actually a mirror and should be treated as if it came from another domain. Does anyone know what meta tag this is? I tried searching all over apple and found nothing.
I believe it might also be possible if you can get webkit to treat the cache as a file:// protocal, because then cross site security will not apply.
The answer is this is not possible and is not meant to be possible.

Use of HTML 5 doctype creates a gap at top of page on iphone safari browser

Update: Please disregard, my problem was caused by an advertisement bar being inserted by the vendor who provides my workplace wireless service.
I was building a mobile friendly website and wanted to use HTML 5. However when I specify the doctype as <!DOCTYPE HTML> , I get a gap at the top of the page on safari on the iphone.
I notice that other sites have the same problem such as nextstop.com and nike.com
I guess safari does not fully support HTML 5 yet. Anybody know of a workaround?
HTML 5 is still in a very unstable state. Don't use it in a production environment.
Edit Just so you guys know what it's about, HTML 5 is currently an Editor's Draft, and the document clearly states (in the Status of This Document section) that this specification is not stable, and that a consensus may not have been reached on any of the proposed sections. I think it should be clear enough that it means it's a bit early to start using it.
All browsers correctly interpret the HTML doctype. Putting it in sets your browser into Standards Compliant mode, that is the only difference with or without the doctype.
You can use a CSS reset tool like http://meyerweb.com/eric/tools/css/reset/ to get rid of default margins and padding on all elements.