I 've just finished my media queries and everything's fine on mobile devices. Problem came up when testing on real PC, and real viewports. No 404, no error, CSS's validated via jigsaw, added and removed slashes on href's, css files are visible and linkeable, etc. Been reading many questions similar to this one of mine but without any results. Using chrome dev tools so let's see the code, ok?
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta content="#1C002A" name="theme-color"/>
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black-translucent" name="apple-mobile-web-app-status-bar-style">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="true" name="HandheldFriendly">
<meta content="width" name="MobileOptimized">
<link href="/assets/css/minima.css" media="screen and (max-width: 566px)" type="text/css" rel="stylesheet">
<link href="/assets/css/567minima.css" media="screen and (min-width: 567px) and (max-width: 767px)" type="text/css" rel="stylesheet">
<link href="/assets/css/768minima.css" media="screen and (min-width: 768px) and (max-width: 959px)" type="text/css" rel="stylesheet">
<link href="/assets/css/960minima.css" media="screen and (min-width: 960px) and (max-width: 1199px)" type="text/css" rel="stylesheet">
<link href="assets/css/1200minima.css" media="screen and (min-width: 1200px)" type="text/css" rel="stylesheet">
After that codeblock ther's only a manifest.json and head closing tag.
Pure html, vanilla javascript, no less/sass, no ext libraries.
Related
I have a page with following
<title>xxxx</title>
<meta name="description" content="xxx">
<meta name="keywords" content="xxx">
<meta http-equiv="Content-Language" content="hi">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
I am embedding iframe as following
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>xxxxx</title>
Bootstrap is not working and i have also written some media queries as follows
#media screen and (min-device-width: 200px) and (max-device-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
///some css is here
}
#media(min-width: 200px) and (max-width: 768px) {
///some css is here
}
Responsiveness of bootstrap and media queries are not working in iPhone from 3 to 6 any model.
I have also tried the following in iframe link
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no,target-densityDpi=device-dpi"/>
please help me, I could not change to iphone css from pc css
My pc.css and iphone.css is the same css
also I setting below:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:320px) and (max-device-width:480px)" href="{% static "asset/js/iphone.css" %}"/>
</head>
</html>
iphone.css is:
#media screen and (max-width:320px) {
body{
background-color:#e5e5e5;
Max-width: 100%
}
}
Both of my last 2 css pages (800px.css and 800pxland.css) are being neglected in rendering my website on a tablet device. I cannot figure out why, all of the other ones work just fine. As a matter of fact, they worked just hours ago but now no matter what I change and to what degree I change it, nothing works. I just started using Bluehost's CloudFlare service so I'm not sure if that has something to do with it (yes, I am FTP'ing while in dev. mode on CloudFlare). I have been using google chrome as my browser on the tablet the whole time. Ill get the posted p and hopefully it'll help. Thanks!
<head>
<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon" />
<meta charset="utf-8">
<meta http-equiv="cache-control" content="public">
<meta http-equiv="expires" content="Fri, 30 Dec 2022 12:00:00 GMT">
<title>About EDM Uncovered</title>
<link href="/css/12gs.css" rel="stylesheet" type="text/css">
<link href="/css/reset.css" rel="stylesheet" type="text/css">
<link href="/css/stylesheet.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Autour+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Jura:400,600,500,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Monoton' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Days+One' rel='stylesheet' type='text/css'>
<link href="/jquery/jQuery.ui.js" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/jquery/jQuery.js"></script>
<script type="text/javascript" src="/js/protoFluid3.02.js"></script>
<script type="text/javascript" src="/js/unslider.min.js"></script>
<script type="text/javascript" src="/js/jquery.fittext.js"></script>
<script type="text/javascript" src="/js/active.js"></script>
<link media="screen and (max-device-width: 480px)" href="/css/480px.css" rel="stylesheet" type="text/css">
<link media="screen and (max-device-width:600px) and (orientation:landscape)" href="/css/480pxland.css" rel="stylesheet" type="text/css">
<link media="screen and (min-device-width: 1300px) and (max-device-width: 1399px)" href="/css/1300px.css" rel="stylesheet" type="text/css">
<link media="screen and (min-device-width: 1400px)" href="/css/1400px.css" rel="stylesheet" type="text/css">
<link media="screen and (min-device-width:601px) and (max-device-width:800px) and (orientation:portrait)" href="/css/800px.css" rel="stylesheet" type="text/css">
<link media="screen and (min-device-width:800px) and (max-device-width:1300px) and (orientation:landscape)" href="/css/800pxland.css" rel="stylesheet" type="text/css">
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if lt IE 9]>
<html lang="en" class="ie8">
<link rel="stylesheet" type="text/css" href="/css/ie8-and-down.css" />
<![endif]-->
<!--[if IE 9 ]>
<html lang="en" class="ie9">
<link rel="stylesheet" type="text/css" href="/css/ie9.css" />
<![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><!--<![endif]-->
</head>
As a matter of fact, they worked just hours ago...
If by this you mean that the 2 ipad CSS stylesheets were working and now they aren't, then to me it's implying either an issue with them being cached via CloudFlare or there's a CSS error on the stylesheets or styles from another stylesheet are taking precedent.
You could test each possibility by
save duplicates of the last 2 stlyesheets and update the HTML accordingly
eg <link media="screen and (min-device-width:601px) and (max-device-width:800px) and (orientation:portrait)" href="/css/800px-alt.css" rel="stylesheet" type="text/css"> . This would rule out a caching issue
validate the last 2 stylesheets # W3 CSS validation
add a new test selector on each of the last 2 stylesheets and see if you can get it to stick, eg body{background-color:green !important;
These are the most likely causes that come to mind for me.
Good luck!
`
I have question why Less Css not working (page without applied stylesheets) on this both browsers? On IE9+ it looks normal like on Chrome, FF and Opera too.
Look on screens:
Source
code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mansion</title>
<link rel="stylesheet" href="/Content/normalize.css" media="all"/>
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,700,900,300' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'/>
<link rel="stylesheet/less" href="/Content/siteHD.less" media="screen and (max-width: 1920px)" />
<link rel="stylesheet/less" href="/Content/site1024.less" media="screen and (max-width: 1024px)" />
<link rel="stylesheet/less" href="/Content/site768.less" media="screen and (max-width: 768px)" />
<link rel="stylesheet/less" href="/Content/site640.less" media="screen and (max-width: 640px)" />
<link rel="stylesheet/less" href="/Content/site320.less" media="screen and (max-width: 320px)" />
</head>
<body>...</body>
</html>
IE10 (IE9 look like here)
IE8 (look on last style which jump over head section)
Are you see here something wrong what I cannot see?
It seems you are trying to use LESS files on your site without including the less.js library, which is required to translate your LESS code into CSS that the browsers can understand.
Download less.js from the top of the page at lesscss.org, and then include it just before your </head> tag:
<script src="less.js" type="text/javascript"></script>
Obviously you'll need to change the path to wherever you store the JS file on your website. Please note that this file is to be included after your stylesheets.
Example with your posted code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mansion</title>
<link rel="stylesheet" href="/Content/normalize.css" media="all"/>
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,700,900,300' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'/>
<link rel="stylesheet/less" href="/Content/siteHD.less" media="screen and (max-width: 1920px)" />
<link rel="stylesheet/less" href="/Content/site1024.less" media="screen and (max-width: 1024px)" />
<link rel="stylesheet/less" href="/Content/site768.less" media="screen and (max-width: 768px)" />
<link rel="stylesheet/less" href="/Content/site640.less" media="screen and (max-width: 640px)" />
<link rel="stylesheet/less" href="/Content/site320.less" media="screen and (max-width: 320px)" />
<script src="less.js" type="text/javascript"></script>
</head>
<body>...</body>
</html>
On another note, you should probably take a look at compiling your LESS code to one or more CSS files using one of the available compilers. Check out the list of available GUI compilers that use LESS.
I'm creating a responsive website using several stlyesheets. Everything works fine in IE 9, Firefox and Safari, but the when I view the site in IE 8 or below, the styles disappear.
You can view the site at http://stevepolitodesign.comlu.com/ (I am hosting it for free for debugging purposes, so it may be down periodically)
Here is the HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Steve Polito Design</title>
<!-- CSS -->
<link href="css/wide.css" rel="stylesheet" type="text/css" media="screen and (min-width: 1501px)" />
<link href="css/layout.css" rel="stylesheet" type="text/css" media="screen and (min-width: 801px) and (max-width: 1500px)" />
<link href="css/medium.css" rel="stylesheet" media="screen and (min-width: 401px) and (max-width: 800px)" />
<link href="css/narrow.css" rel="stylesheet" media="screen and (min-width: 0px) and (max-width: 400px)" />
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="css/iphone.css"/>
<link href="css/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" media="screen"/>
<!-- #font-face -->
<link href="fonts/#font-face.css" rel="stylesheet" type="text/css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="js/site.js"></script>
</head>
The media attribute is part of CSS3 and is therefore not supported by IE 6/7/8. See this article, http://nicolasgallagher.com/mobile-first-css-sass-and-ie/, for more information about it.
The quick solution is to add some lines that link to css files that are hidden to all but IE6-8.
<!--[if (gt IE 8) | (IEMobile)]><!-->
<link rel="stylesheet" href="/css/style.css">
<!--<![endif]-->