I'm creating a Responsive Website but cannot seem to get it to work in IE (I'm testing in IE8). Now, I know that Internet Explorer 8 and below doesn't support CSS3 media queries. But I included the css3-mediaqueries.js Javascript file (hosted by Google) and it still doesn't work.
I stripped out all the code leaving the very minimum (literally only 26 lines of HTML and a combined 34 lines of CSS). The HTML successfully validates as HTML5 and the CSS validates as CSS level 3. Here's the code:
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
<title>Responsive Site</title>
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width: 800px)" href="css/responsive.css" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<div id="article"> </div>
<div id="side"> </div>
</div>
</body>
</html>
custom.css:
#charset "UTF-8";
/*html5 display rule*/
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display: block;}
body {margin: 0px; padding:0px}
.wrapper {
width:78%;
margin:0 auto}
#article {
float:left;
width:61.224489795%;
margin:20px 0 0 0;
padding:0;
height:500px;
background-color:#000}
#side {
float:right;
width:30.775510204%;
margin:20px 0 0 0;
padding:0;
height:500px;
background-color:#999}
responsive.css:
#charset "UTF-8";
#article {
width:100%}
#side {
width:100%;
clear:left}
In addition to the inability to use #imported stylesheets (which is documented on the github and google code project) - there is a problem if one does not explicitly state the media query in a format similar to:
#media screen and (min-width: 666px) and (max-width: 1000px)
compared to:
#media and (min-width: 666px) and (max-width: 1000px)
please look at this issue in the github issues section for this project - after about an hour of trying to set this up - the lack of screen in my media-queries was causing them to not be recognized.
I finally figured it out! And only a few lines of code had to change.
A friend pointed out that the documentation for the css3-mediaqueries.js Javascript file reads:
Note: Doesn't work on #import'ed stylesheets (which you shouldn't use
anyway for performance reasons). Also won't listen to the media
attribute of the and elements.
I was using the media attribute in the link element in my HTML file. So, here's what I did to resolve the issue:
In the HTML file I removed:
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width: 800px)" href="css/responsive.css" />
And replaced it with:
<link rel="stylesheet" type="text/css" href="css/responsive.css" />
I then added the media attribute to my responsive.css file:
#charset "UTF-8";
#media screen and (max-width: 800px) {
#article {
width:100%}
#side {
width:100%;
clear:left}
}
But it still didn't work. I then changed the ordering of the media and #charset attributes in my responsive.css file. I simply rearranged lines 1 & 2:
#media screen and (max-width: 800px) {
#charset "UTF-8";
That did the trick. Not sure exactly why the ordering of the character set makes a difference? Perhaps someone can shed some light on it.
Thanks David for the useful suggestions! It's good to have several option in the tool shed and I may turn to respond.js in the future. But for now, I am happy with the code that Google is hosting.
Have you tried respond.js ?
Good luck!
Update
It may be safer to combine your two CSS files into one. Add the mobile specs into your custom.css file with:
#media (min-width: 50px) and (max-width: 800px) {
/* mobile CSS here */
} /* close # media for mobile */
<meta http-equiv="X-UA-Compatible" content="IE=9">
You must place that before any other meta tags.
Related
I am new to code, so be gentle :slight_smile:
If I have a navigation bar at the top of a webpage and then directly under that I want a background picture (for this experiment I will just choose a randomly sized photograph from my own collection). I’ll use that picture somewhat similar to how Facebook have their cover photo. But I have a very specific size limit and I also want that to change with device size.
#container {
width: 90%;
margin: auto;
}
#media screen and (max-width: 768px){
#container {
width: 90%;
}
That’s as far as I have got.
How do I make an image cut off its top or sides if it goes past a certain width or height but also do not stretch the image (the image needs to maintain its x,y sizes so it does not distort)?
I am only using HTML, CSS and JS at the moment.
Thanks in advance. Looking forward for the learning.
You can use the CSS property object-fit with the "cover" value.
This will help you to understand, how object-fit will work?
#main {
width:100%;
height:100px;
overflow: hidden;
}
#main img {
width:100%;
height:100%;
object-fit: cover;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="main">
<img src="https://europeansting.files.wordpress.com/2019/11/nature.jpeg" alt="alttext">
</div>
</body>
</html>
I'm fixing an old Android app, more exactly a Xibo player: you create a kind of presentation on the website and schedule it on your displays (in that case some Android devices).
I didn't got very good the mechanics yet (since some part of code are obfuscated), so I can't say who creates the files, but there are some html, javascript and raw files (pdf, jpeg, etc) and I know the app uses soap service.
Now the app is working pretty good, but if there is a pdf in the presentation (OK with jpg, bit I didn't try with other files) I see a string on the top of the view (WebView) and a string at the bottom, respectively "GetResourceRespond{resource=“ and "} ;".
I noticed those string at in the html file itself, but if I remove them, I can't see the file (I got a white view instead).
Those string are outside the <. html> tag, first one before <. doctype> and the second one after <. /html>, but I believe this is wrong.
Does somebody have an idea?
This is one html file:
GetResourceResponse{resource=<!doctype html>
<html lang="en">
<head>
<title>Xibo Open Source Digital Signage</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Copyright 2006-2017 Spring Signage Ltd. Part of the Xibo Open Source Digital Signage Solution. Released under the AGPLv3 or later. -->
<style type="text/css">
body {
margin: 0;
overflow: hidden;
font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
}
h1, h2, h3, h4, p {
margin-top: 0;
}
#iframe {
border: 0;
}
.cycle-slide p, p.cycle-slide {
margin-bottom:0;
}
</style>
<link href="fonts.css" rel="stylesheet" media="screen" />
</head>
<!--[if lt IE 7 ]><body class="ie6"><![endif]-->
<!--[if IE 7 ]><body class="ie7"><![endif]-->
<!--[if IE 8 ]><body class="ie8"><![endif]-->
<!--[if IE 9 ]><body class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><body><!--<![endif]-->
<div id="content"></div>
</body>
<script type="text/javascript">var options = {"type":"text","fx":"none","duration":15,"durationIsPerItem":false,"numItems":1,"takeItemsFrom":"start","itemsPerPage":0,"speed":0,"originalWidth":"1920.0000","originalHeight":"1080.0000","previewWidth":0,"previewHeight":0,"scaleOverride":0,"marqueeInlineSelector":".item, .item p"}; var items = ["<p style=\"text-align: center;\"><span style=\"font-size:168px;\"><strong><span style=\"font-family:arial,helvetica,sans-serif;\"><span style=\"color:#FFFFFF;\">Welcome to Xibo<\/span><\/span><\/strong><\/span><\/p>\n\n<p style=\"text-align: center;\"><span style=\"font-size:80px;\"><span style=\"font-family:arial,helvetica,sans-serif;\"><span style=\"color:#FFFFFF;\">Open Source Digital Signage<\/span><\/span><\/span><\/p>\n\n<p style=\"text-align: center;\"><span style=\"font-size:48px;\"><span style=\"color:#D3D3D3;\"><span style=\"font-family:arial,helvetica,sans-serif;\">This is the default layout - please feel free to change it whenever you like.<\/span><\/span><\/span><\/p>\n"];</script> <script type="text/javascript" src="jquery-1.11.1.min.js"></script> <script type="text/javascript" src="xibo-layout-scaler.js"></script> <script type="text/javascript" src="xibo-text-render.js"></script> <script type="text/javascript" src="xibo-image-render.js"></script> <script type="text/javascript">$(document).ready(function() { $("#content").xiboTextRender(options, items); $("body").xiboLayoutScaler(options); $("#content").find("img").xiboImageRender(options); }); </script> </html> ; }
Just a guess, "GetResourceRespond{resource=“ and "} ;" could result from JavaScript, which is allowed inside and after the <html></html>. If you don't see more of the JavaScript, it's likely obfuscated with the rest.
Please take a look at the link with your smart phone, you can see that it's a bit off. I center everything and the web looks fine in Desktop but not in smart phone(I use iPhone 5S). Is there any ways I can make it like the desktop for any kind of smart phone? Is there any ways I can make it look like Gmail app that you can not scroll everywhere?
I have done all the adjustment like the following code in the head tag. But it's not working. Here's the url if you need to look up in Desktop: https://johnny00520.github.io/Test.git.io/
Thank you so much.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<title>MindScribe</title>
<!--<meta name="description" content="An interactive getting started guide for Brackets.">-->
<!-- Maybe I need. Note that Android and iOS ignore media="handheld"-->
<link rel="stylesheet" media="handheld, only screen and (max-device-width: 320px)" href="phone.css">
<link rel="stylesheet" media="only screen and (min-width: 641px) and (max-width: 800px)" href="ipad.css">
<!-- media="handheld" trick for Windows Mobile -->
<link rel="stylesheet" href="screen.css" media="Screen">
<link rel="stylesheet" href="mobile.css" media="handheld">
<!--smartphone conpatible-->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes" />
<!-- Home screen icon -->
<link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" />
<link rel="apple-touch-icon-precomposed" href="/static/images/identity/HTML5_Badge_64.png" />
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/main.css">
Try the following:
Add to body the following CSS properties:
box-sizing: border-box;
overflow: hidden;
margin: 0;
padding: 0;
box-sizng - The width and height properties (and min/max properties) includes content, padding and border, but not the margin.
overflow - to prevent the scrolling.
padding & margin resets just to clean up any extra space generated by the browser.
This will push your #cursive title up a bit, but you can bring it down with let's say (tweak to your benefit):
margin: 4em 0 1em;
You may chose to add the above inside a #media query for mobile viewport only or not, could be something like (tweak value to your benefit):
#media (max-width: 768px) {
body {
box-sizing: border-box;
overflow: hidden;
margin: 0;
padding: 0;
/* etc */
}
}
I want to make it for my site,
This is my question:
If the user is using a computer to view my web page the css should be
<link rel="stylesheet" href="/pc.css" type="text/css" media="all" />
But if they use mobile the css should be
<link rel="stylesheet" href="/mobile.css" type="text/css" media="all" />
How will I do it. I want html not php
You could do something like this through media queries
<link rel="stylesheet" media="screen and (min-device-width: 1024px)" href="pc.css" />
<link rel="stylesheet" media="screen and (max-device-width: 1024px)" href="mobile.css" />
If you wanted to go the Javascript route for this
function adjustStyle(width) {
width = parseInt(width);
if (width < 1024) {
$("#size-stylesheet").attr("href", "css/mobile.css");
} else {
$("#size-stylesheet").attr("href", "css/pc.css");
}
}
$(function() {
adjustStyle($(this).width());
$(window).resize(function() {
adjustStyle($(this).width());
});
});
It may be more reliable do accomplish this with media queries in CSS. Because some browsers do not have JavaScript enabled, especially mobile browsers, it is considered a best practice to support basic functionality without JavaScript. See this answer by Haylem for more.
A great explanation of CSS3 media queries is available in this SmashingMagazine.com article, "How to Use CSS3 Media Queries". In your example, you could quickly implement this as follows:
<style>
#import url(/pc.css) (min-width:480px);
#import url(/mobile.css) (max-width:480px);
</style>
Naturally this will not work in ancient versions of Internet Explorer, so you might need to consider this also:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="/pc.css"/>
<![endif]-->
However, if you do not have strong experience with responsive web design (RWD), you may be better off considering a CSS framework like Foundation or Bootstrap. Check out this Mashable.com article for a good overview.
You might also want to check out HTML5 Boilerplate which is used in the more comprehensive quick start kit, INIT.
How can I use Twitter Bootstrap on Node.js and Express?
I know I have to put CSS and Javascript files in ./public directory (if it's set default). But when I look for how to use Twitter Bootstrap on Node.js and Express, I get to know there are many variants on using Twitter Bootstrap.
For example, just put bootstrap CSS and JS files in appropriate directories, or specify :
<link rel='stylesheet' href='assets/css/bootstrap-responsive.css'>
<link rel='stylesheet' href='https://d396qusza40orc.cloudfront.net/startup%2Fcode%2Fbootstrap.js'>
etc, and also there are two sources, normal and .min.css file, each with CSS and JS. So how can I serve the appropriate Bootstrap file in Node.js and Express?
Here's a first few lines of my current code (is it necessary?), which is not working with responsive design (it doesn't stack vertically when I narrow the screen to mimic the size of smartphones, and instead just scale down the size with each ratio being the same).
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title><%= title %></title>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link rel='stylesheet' href='/stylesheets/bootstrap.min.css'>
<link rel='stylesheet' href='assets/css/bootstrap-responsive.css'>
<script src='/javascripts/jquery-2.0.2.min.js'></script>
<style type='text/css'>
/* Large desktop */
#media (min-width: 980px) {
body {
padding-top: 60px;
}
}
/* smartphones */
#media (max-width: 480px) {
body {
padding-top: 30px;
}
}
</style>
</head>
Create one sub folder in public folder and name it as stylesheets.Then put all your twiter bootstraper css files in that stylesheets folder.Then you can link the file like below.Follow the same for js files also.
<link rel='stylesheet' href='stylesheets/bootstrap.min.css'>
<link rel='stylesheet' href='stylesheets/bootstrap-responsive.css'>
<script src='javascripts/jquery-2.0.2.min.js'></script>
Create a folder like .\public\js\lib\bootstrap and in bootstrap folder keep the two files bootstrap-combined.min.css and bootstrap.js whic you can get from bootstrap repository the in the ./views/index.html page include those files as
<link href="/js/lib/bootstrap/bootstrap-combined.min.css" rel="stylesheet">
<script src="/js/lib/bootstrap/bootstrap.js"></script>
it should now work for you....