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%
}
}
Related
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.
I want to load background images by css dependent on the display resolution with the #media keyword. It works fine in Firefox and chrome, but it does not work in Safari. Is there something I miss?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Snowboardschule: Skigebiet</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/fileadmin/css/style.css?1496823820" media="all" title="main">
<style type="text/css">#media(min-resolution: 1dppx){ .trailer { background-image: url(fileadmin/_processed_/e/d/csm_trailer1_ca6cb9b743.jpg); }}</style>
</head>
<body>
<header>
<div class="trailer">
...
</div>
</header>
</body>
</html>
Try using
<style type="text/css">
#media and screen (min-resolution: 1dppx)
{ .trailer { background-image: url(fileadmin/_processed_/e/d/csm_trailer1_ca6cb9b743.jpg); }}
</style>
I have a ReactJS website recently deployed on Heroku, and believe I have what's needed for a website to be mobile responsive, yet the website just looks exactly how it should look like if it were to be viewed on a desktop. Everything is extremely small when viewed on mobile.
What could be the issue?
Here is the HTML:
<html lang="en" class="practice">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Practice Web</title>
<meta name="description" content="practice">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="/bundle.js"></script></body>
</html>
Maybe the content extends past the container, like images or something. Try this to see if that's the case:
<html lang="en" class="practice">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Practice Web</title>
<meta name="description" content="practice">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {
width: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="/bundle.js"></script>
</body>
</html>
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"/>
I am trying to make a background image into a retina image using LESS CSS and RetinaJs:
in my index.html file :
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
[...]
<link type="text/css" rel="stylesheet/less" href="resources/css/retina.less">
<script type="text/javascript" src="resources/js/less-1.3.0.minjs" ></script>
[...]
</head>
<body>
[...]
<script type="text/javascript" src="resources/js/retina.js"></script>
</body>
</html>
in my retina.less file:
.at2x(#path, #w: auto, #h: auto) {
background-image: url("#{path}");
#at2x_path: ~`"#{path}".split('.').slice(0, "#{path}".split('.').length - 1).join(".") + "#2x" + "." + "#{path}".split('.')["#{path}".split('.').length - 1]`;
#media all and (-webkit-min-device-pixel-ratio : 1.5) {
background-image: url("#{at2x_path}");
background-size: #w #h;
}
}
.topMenu {
.at2x('../../resources/img/topMenuTitle.png');
}
I have both topMenuTitle.png (320px x 40px) and topMenuTitle#2x.png (640px x 80px) in the same folder.
When test this code:
In Firefox i have the normal Background
In the XCode iPhone simulator I also have the normal Background
In the iPhone device, I don't have any background at all.
I'm using GWT if that matters.
Any suggestions ? Thanks.
A newer version of retina.less fixes the problem :
You'll need to replace
background-image: url(#path);
with
background-image: url("#{path}");
or else this will not compile on iOS