let's assume I have a so called 2.0 app, compatible from IE6 upwards. The app uses quite complex CSS and is driven by heaps of JS. It works, very well it does.
Now let's assume there is a client who own a strangely coded site, archaic in ways, and forces IE7 emulation through this wonder of a tag:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Now, he desires to use my app, which is injected in his code using a simple external script call. It works, but not so under the IE7 emulation - obscure bugs from Hell start appearing, not even overflow hidden works properly. By itself the app does work in IE7, but as it turns out, the IE7 emulation is not the same as IE7 and has it's own set of fancy issues.
Turns out the client is unable to strip the emulation meta tag, so I'm left with I don't really know. Does anyone know of ANY WAY I could overpower the rendering mode set in the page header or would there be some other suggestions?
My utmost thanks for anything usable.
Perhaps you could make a wrapper for your app. An iframe that contains an empty page to make the script call. The content of the iframe should not be affected as the meta won't be present in the empty page.
Related
I trying to decide whether I could to use angular.js (and anguar-ui-bootstrap) in my project.
The web application should work with any reasonably modern browser, I was quite surprised that the right on the angular-ui-bootstrap site, after clicking on "create a build" button the server responds:
Your current browser doesn't support creating custom builds. Please
take a second to upgrade to a more modern browser (other than Safari).
with a link to http://browsehappy.com, where my Safari (v.8) is listed, but the angular-ui-bootstrap explicitly excludes it.
In the FAQ for the angular.js is:
AngularJS is 100% JavaScript, 100% client-side and compatible with
both desktop and mobile browsers.
also the bootstrap 3 itself is compatible too.
Since I am a complete novice to angular.js, just downloaded and trying to learn it, but honestly, I do not want to waste several days/weeks with learning to discover: it doesn't supports Safari fully. The support of all reasonably modern browsers is crucial for the project.
Therefore the questions are:
Supports angular-ui-boostrap any reasonable modern browser fully, e.g. for any functionality?
If not fully, which functions / modules / parts are "problematic"?
e.g. the "build-problem" is the angular.js's "feature" ?
The angular-ui-bootstrap build modal window kicks off a function called isOldBrowser. Looking through their repo you can find that function under misc/demo/assets/app.js. Instead of looking for specific browsers it's looking for the browser to be able to execute specific functions or return certain results. Presumably, the checks would be a very generalized way for them to make sure you have an appropriate browser.
Having said that, Bootstrap lists pretty much every browser as being supported with only a few exceptions (like Safari on Windows) plus a couple of bugs each. Angular has a similar statement in that they support all current browsers (IE9 and up). Either way you should be safe using any modern browser.
In the interest of learning how to use Angular, I thought I'd port a half-finished project of mine over from vanilla JavaScript.
The original is here: http://john.bitsurge.net/bikeracks/
The new version is here: http://john.bitsurge.net/bikeracks-angular
angular-leaflet-directive: http://tombatossals.github.io/angular-leaflet-directive/
The first thing I noticed was that the angularized version was significantly more CPU heavy than the original. To see this, zoom way out and then zoom in again quickly. This is problem still manifests, even after removing all $watchs from the markers. ng-stats claims there are only 18 $watchs left, which is certainly acceptable.
The output from batarang suggests to me like things are actually pretty fast, but that contradicts that actual user experience, which is noticeably different between the two. Maybe these batarang times are per-call but there are just hundreds of calls being made?
Batarang Output
The second thing I noticed, while trying to debug the first, is that the angular version doesn't appear to be using any mobile-friendly styling! The buttons are hopelessly tiny and I can't read the attribution at all.
Any idea what's going on here?
Angular looks like the desktop version
The vanilla app uses mobile-friendly sizes
I still have no good answer for the performance issues but the map rendering problems were due to a missing <meta> tag in the <head>.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
..
</head>
solves this one! \o/
well i've made a responsive website which handles well in mobile devices. Now there are some Phonenumbers on the website which my cliënt would like to be clickable on any Phone so the visitor can call directly. I found that making a link of the phonenumbers works like so:
make a call
This triggers mobilephones to call the number. But it also triggers the webbrowser on any other device to follow the link, which results in "page can't be found"
I'm looking for a good anwser to tackle this problem. I've been searching for a while now but i'm getting a bit tired and frustrated.
I think i've come with a solution but i don't excactly know how to put this in the html.
There are several ways to conditional comment browsers in html. If i could do this with the link part and rule it out:
<!--[if any **none mobile** webrowsers: don't read:]>003164646464
And all mobile browsers read the link.
It seems to me, that this is the most easy way to do this, but i could be wrong...
I hope that someone can give me any pointers, I really appreciate your idea's and help!
THANKS!
There is no easy way to achieve this. You can use different approaches depending how accurate you want to be:
WURFL - most accurate, allows to check user-agent and get browser / device capabilities
You can try parsing user-agent by your own detecting OS - check this answer Detecting a mobile browser
Use css media queries to target devices with small screen
Unfortunately there is no silver bullet for this (at least I don't know one).
I have heard that EXTJS is a browser independent javascript library. How does extjs make itself browser independent? When I open up the library classes, I do not see any code like :
if (IE)//do this;
else if (FF) // do something else;
Is my understanding correct that extjs is browser independent?
In addition to sha's point, I'm aware that ExtJS uses conditional checks for browser features and selects whether to use things like images, or css for particular visual effects.
Two examples of this would be that it manages to produce rounded corners on it's widgets in IE6 via images, but in anything which supports it, it will use 'border-radius' in CSS.
This is also true with gradients in widgets, which are rendered as images in older browsers, but use CSS3 gradients where supported.
As a rule, from what I've seen, ExtJS uses 'feature detection' to work out what your current browser supports and responds appropriately. A further example of this would be it's charting classes, which render as SVG if supported, or VML on older browsers.
There are some classes in ExtJS you can use to perform feature detection if you wish to do anything specific outside of it's in built in actions too. I'd imagine it uses these under the hood to make decisions about what to render.
That aside, it should be noted that every now and again, you can notice odd discrepancies between browser versions, usually annoying little visual effects, like a scrollbar being present in one browser an not in another, this could however just be a symptom of other code, but I know we've seen a few little quirks from time to time when testing accross IE8, IE9 and Chrome for example.
It is browser independent. As far as I know they have some different CSS definitions for different browsers. If you want to see is there any difference in the JS code you will have to look deeper - probably at some ExtJs core files.
We've been using it so far on IE, FF, Chrome, Safari, Mobile Safari etc.
I have recently developed a couple of websites for a local vets and car valeter which look fine in internet explorer 9 and firefox but when viewed in internet explorer 6 or 7 it just goes wrong
In the car valeting all the boxes move down so they do not run as i have placed them (this only happens in IE6 not 7
in the vets website there is a lot of whitespace at the bottom of quite a few pages before you reach the footer. I know IE6 and IE7 are outdated but I would still like to fix the errors if possible.
Thank you for your help.
Dont forget the doctype on the top of your html file, otherwise the browser will
work in quirks mode instead of compatibility mode. Might solve your issue. Also no one uses IE 6 anymore, do not bother
check your site with the w3c validator and fix qny errors nd warnings, besides that there isnt much you can do
A helpful approach would be to use frameworks for JavaScript (jQuery) and CSS (BluePrint) for cross browser compatibility. It will take time to migrate to new coding, but will be worth it.
On a side note, if you do not mind redirecting the users of IE 6/7 to a page suggesting they upgrade their browsers, then you may try something like this in your JS:
var browserVer=parseInt(navigator.appVersion);
var browserName=navigator.appName;
if((browserName=="Microsoft Internet Explorer" && browserVer<=6) || (browserName=="Netscape" && browserVer<=3))
window.location="Incompatible.html";
Where 'Incompatible' is the page where you want to redirect. Also if you use above as a function, make sure you call it:
<body onLoad=yourFunction()>