Here's the original page that I coded using "Adaptive Design", and has no support for mobile devices: http://opportunityfinance.net/Test/savedateIE8/index.html
Looks great in IE 8 as it should via the pic below:
Here's a page that I optimized for mobile devices, basically it is EXACTLY the same as the first page, except it adds in <meta> tags and such for mobile devices. Looks good in all browsers that I test, except IE 7 (which I could care less about), and IE 8 (WHICH I REALLY CARE ABOUT) A lot of people visit the site using IE 8, so it needs to support IE 8!: http://opportunityfinance.net/conference-2013/index.html
Pic of what it looks like in IE 8 below:
Why is this looking completely different in IE 8 than the first pic? I can't understand it. AFAIK, it should be loading up the index.css file and applying it exactly like the first page. What is the problem here?
Could it possibly be related to this bit of code:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
But if I remove that code than it looks all jacked up in IE 9 also!
EDIT: Please do not edit my code changing IE 8 to IE 9. I understand that this problem is being tested in IE 9, but it is using IE 8 Document Mode in Developer Tools, so it is the same as IE 8!
Ok, here's how I solved this problem. Apparently any version of IE before IE 9 does not attach the stylesheet when using media queries inside of the link tags media attribute. Also, IE 8- had some odd behavior when presented with this line: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> And as it turns out, I don't even need this line: <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> which was causing problems since the Google Chrome Frame wasn't available, and edge wasn't either. So, I just removed that line, and all is fine now.
Here's the dirty hack I had to do in order to get this working for mobile devices and IE 7 and 8, for anyone interested:
<!--[if gte IE 9]>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<![endif]-->
<!--[if !IE]><!-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!--<![endif]-->
<link rel="stylesheet" type="text/css" href="css/narrow.css" media="only screen and (max-device-width: 600px)" />
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<![endif]-->
<!--[if gte IE 9]>
<link rel="stylesheet" type="text/css" href="css/index.css" media="only screen and (min-device-width: 601px)" />
<![endif]-->
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="css/index.css" media="only screen and (min-device-width: 601px)" />
<!--<![endif]-->
I wish there was an else statement in these conditionals, but whatever. This works now and loads up the index.css file and thank god, cause I was pulling out my hair on this one! The narrow.css file doesn't need any conditionals, since IE 7 and 8 ignore the stylesheet anyways cause it uses media queries.
Related
I have a simple Tizen webapp that works fine in emulator, but not on my Samsung signage TV (SSSP6).
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class='embed-container'>
<iframe width="100%" height="100%" sandbox="allow-same-origin allow-top-navigation allow-forms allow-scripts allow-popups" src="https://ad-presenter-staging.herokuapp.com/betsonglobal"></iframe>
</div>
</body>
</html>
If I replace the <iframe> with an actual <video> with the same content as what's in src, then it works fine in both emulator and on the TV.
How do I go about debugging this?
It's very possible URL is blocked during access. try updating the config.xml => policy => allow-navigation or Access
with external URL domain you want to access.
If I replace the with an actual with the same content as what's in src, then it works fine in both emulator and on the TV.
=> Does it show any error when is used on TV? The info displayed in region should be helpful to debug.
How do I go about debugging this?
=> If you're able to connect the TV to your PC, you can try launching the webapp in debug mode. After launch, if you check console section in Web Inspector, it should be logging the URLs blocked and the reason for block which should aid in fixing
I have a build a React application and deployed it on Heroku. When I try to load my home page "/" I get no errors and the page loads perfectly. But when I try to navigate to a different page "/RegistrationList" I get the Content Security Policy errors:
I have already searched for a solution online and found that I need to specify a Meta tag in the index.html file inside the public folder of my application. So now this file looks as follows:
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
http-equiv="Content-Security-Policy"
content="default-src * 'self' 'unsafe-inline' 'unsafe-eval'"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<link
href="https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght#0,400;0,700;1,400&display=swap"
rel="stylesheet"
/>
...
But at this point I still keep on getting the errors. The strange thing is that the main page ("/") loads perfectly and the second page gives these errors.
Your current CSP within the index.html is useless under a security point of view (you are allowing everything, so this is equivalent as not defining a CSP).
CSP can be defined either in your front-end (index.html) and back-end, and when there is a mismatch, you find all kinds of errors. If you try to remove the CSP meta tag from your index.html and you still get the error, it means the problem is in the server side.
In case of Apache server, this is located in file 'htaccess'. As for Heroku, I don't know exactly where it is. Perhaps this can work:
https://stackoverflow.com/a/57288001/10802411
I want to use Material-UI with Gatsby. On the usage page, it says I have to add the following responsive meta tag:
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
/>
Now, if I take a look at the meta tags that Gatsby starts off with, they are almost the same:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
So basically,, the only difference is that material-ui wants me to add minimum-scale=1.
My question is how can I update or replacethe meta viewport tag to include this value. I tried using react-helmelt in my base layout as follows:
<Helmet>
<meta
name='viewport'
content='minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no'
/>
</Helmet>
But what that does is give me two meta viewport tags -- the one that Gatsby starts out with and the one that I added via Helmet:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name='viewport' content='minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no' />
What I want is just one meta viewport tag -- the one that includes minimum-scale=1.
Any ideas on how to do this?
Thanks.
If you really need the viewport meta changed you will need to override the default html template Gatsby uses. Just copy .cache/default-html.js to src/html.js and customize it to your liking.
As a side note, I really doubt there will be any problem using Gatsby's default viewport meta with Material-UI.
I'm using Yeoman and the angular-fullstack generator to bootstrap an angular app. When I do grunt serve or grunt serve:dist everything works as expected.
Now the question is, when I open the index.html file directly in the browser, isn't it supposed to work equally?
So I have a hard time understanding whats tasks grunt is executing here to make it work. Or maybe I am missing something else.
The console tells me:
GET file:///app/8d57a97f.app.css net::ERR_FILE_NOT_FOUND
GET file:///app/47ab0f3e.vendor.js net::ERR_FILE_NOT_FOUND
GET file:///app/01b9b8a8.app.js net::ERR_FILE_NOT_FOUND
The generated index.html looks something like this:
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<base href="/">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="app/8d57a97f.app.css"/>
</head>
<body ng-app="myApp">
<!-- some functionality... -->
<script src="app/47ab0f3e.vendor.js"></script>
<script src="app/01b9b8a8.app.js"></script>
</body>
</html>
The reason why I do this:
I try to run the angular app with phonegap on an android device. When I load it to the android mobile, the screen remains blank. So I opened it in the browser and got the same result.
So this is my first attempt to solve this issue.
The problem was the <base href="/"> in the header.
Explanation can be found here (Loading local file in browser referenced css or js).
I'm having an issue where IE 7 styles look mostly correct in Quirks mode, but in Standards mode it is ignoring or not seeing many of the styles. The quirks mode version looks much closer to the way it looks in Chrome and Firefox.
UPDATE
I found that the file had a syntax error in the CSS file which was causing everything below that point in the CSS to be ignored by IE 7.
IE 7 renders web files differently than other browsers (so does the other version of IE).
To fixed that, you need to use css hack for each IE versions:
<!--[if IE 7]>
<link rel="Stylesheet" type="text/css" href="styles/ie7_styles.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="Stylesheet" type="text/css" href="styles/ie8_styles.css" />
<![endif]-->
<!--[if IE 9]>
<link rel="Stylesheet" type="text/css" href="styles/ie9_styles.css" />
<![endif]-->