I am building a website for smartphones and tablets using JQM. I have a page which shows a Google map using gmap3. I am using #media to define the size of the #map_canvas based on screen resolution.
Everything is working perfectly well, except that when the device's orientation is changed, the page gets zoomed-in (enlarged). How can I fix this?
Portrait view with no problems (iPhone 4)
When the phone is rotated, the page gets enlarged. But when the page is called in landscape view, it looks fine.
Here's my code.
<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!--JS and CSS links where removed to save space-->
<script type="text/javascript">
$(function(){
$('#map_canvas').gmap3({
marker:{
latLng:[36.491025,-4.951299],
options:{
center:[36.491025,-4.951299]
},
},
map:{
address:"Puerto Banus, Marbella, Spain",
options:{
zoom:16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
scrollwheel: true,
streetViewControl: true
}
}
});
});
</script>
Page structure
<body>
<div data-role="page" data-theme="b">
<div data-role="header"><h1>Map Page</h1></div>
<div data-role="content" id="map_canvas">
</div> <!-- /content-->
</div> <!-- /page-->
</body>
#media query
<style>
#map_canvas {
height: 768px;
width: 1024px;
margin-right:auto;
margin-left:auto;
}
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
#map_canvas {
height: 768px;
width: 1024px;
}
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
#map_canvas {
height: 768px;
width: 1024px;
}
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
#map_canvas {
width: 768px;
height: 1024px;
}
}
/* iPhone 4 - (portrait) ---------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 2) and (orientation:portrait),
only screen and (min-device-pixel-ratio : 2) and (orientation:portrait){
#map_canvas {
width: 300px;
height: 400px;
margin-top: 5px;
margin-right: auto;
margin-bottom: 5px;
margin-left: auto;
}
}
/* iPhone 4 - (landscape) ---------- */
#media screen and (-webkit-min-device-pixel-ratio : 2) and (orientation:landscape), screen and (min-device-pixel-ratio : 2) and (orientation:landscape){
#map_canvas {
width: 400px;
height: 300px;
margin-top: 5px;
margin-right: auto;
margin-bottom: 5px;
margin-left: auto;
}
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px)
and (max-width: 480px) {
#map_canvas {
width: 400px;
height: 300px;
margin-top: 5px;
margin-right: auto;
margin-bottom: 5px;
margin-left: auto;
}
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
#map_canvas {
width: 300px;
height: 400px;
margin-top: 5px;
margin-right: auto;
margin-bottom: 5px;
margin-left: auto;
}
}
</style>
EDIT: Added photo of a landscape view on initial load.
Check out using jquery-ui-map. It might be a better way than gmap3
You can force your viewer to look at your site in landscape mode. You can see what I did at https://www.bluepitt.com where if your looking at the site in portrait, I have a picture that covers up the site that tells the viewer to rotate to landscape. When they turn to look at landscape, the picture disappears and your designed page displays. Here is the code you place in the body of your site:
<div id="wrapper">
<!-- your html for your website -->
</div>
<div id="warning-message">
<img src="warning.png" width="1000" height="1770" alt=""/> </div>
Related
Below is the code that I'm using to build a page on my website. I'd like the video that I have set to display in the background across the entire screen. I've been able to achieve this on a PC, portrait on a mobile device (I'm currently using an iPhone 12 pro), and on landscape on a mobile device.
However, I'm noticing two issues at the moment. The first issue is that on a mobile device I'm able to scale the video to any size that I'd like. The second issue is that when placing my mobile device in landscape and refreshing the pages a few times the video scales down and doesn't display across the entire screen.
How can I set the video so that no matter what device someone is using it can't be rescaled? And how can I have the video be played full across any screen of any device? The answer to the solution seems to lie within the meta tag, no matter what I do with the CSS it doesn't change the size of the video to fit a mobile device.
<!DOCTYPE html>
<html>
<meta name="viewport" content="viewport-fit=cover, user-scalable=no" charset="utf-8">
<body>
<title>MORIKOBOSHI - 公式ウェブサイト・Official Website</title>
<div class="video-container">
<video src="Home_Page.mp4" autoplay loop muted playsinline style="z-index: 100px; overflow: hidden; object-fit: cover;"></video></div>
<div class="relative">
<p style="text-align: left; font-family: sans-serif; overflow: hidden; color: transparent; opacity: .45;">
</div>
<div class="absolute">
<p style="text-align: left; font-family: sans-serif; overflow: hidden; color: transparent; opacity: .8;">
</div>
<div class="home_page">
<p style="text-align: center; font-size: 40px; font-family: sans-serif; overflow: hidden;"><b>日本語</b> | <b>English</b></p></div>
<style>
.relative {
font-size: 25px;
}
.absolute {
font-size: 13px;
}
#media (max-width: 1130px) and (min-width: 280px) {
.relative {
font-size: 11px;
}
}
#media (max-width: 1130px) and (min-width: 280px) {
.absolute {
font-size: 6px;
}
}
video {
object-fit: fill;
}
.video-container {
position: fixed;
text-align: center;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.video-container video {
/* Make video to at least 100% wide and tall */
/* Setting width & height to auto prevents the browser from stretching or squishing the video */
width: 100%;
height: 100%;
/* Center the video */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#media (max-width: 1130px) and (min-width: 280px) and (orientation: landscape) {
.video {
width: 100vh;
}
}
.relative {
position: absolute;
top: -10px;
left: -13px;
}
#media (max-width: 1130px) and (min-width: 280px) {
.relative {
position: absolute;
top: -15px;
left: -30px;
}
}
.absolute {
position: absolute;
left: 28px;
top: 28px;
}
#media (max-width: 1130px) and (min-width: 280px) {
.absolute {
position: absolute;
top: 4px;
left: -15px;
}
}
video {
position: fixed;
text-align: center;
object-fit: cover;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
object-fit: cover !important;
-webkit-object-fit: cover !important;
-moz-object-fit: cover !important;
-o-object-fit: cover !important;
}
p {
color: white;
text-decoration: none;
color: white;
text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000,
-1px -1px 0 #000;
font-size: 400%;
margin: 50px;
position: relative;
z-index: 3;
}
.home_page {
position: fixed;
top: 520px;
left: 410px;
}
#media (max-width: 1130px) and (min-width: 280px) {
.home_page {display: none;
}
}
#media (max-width: 1130px) and (min-width: 280px) and (orientation: landscape) {
.home_page {display: none;
}
}
</style>
</body>
</html>
http://jimjamdesigns.co.uk/online-portfolio/animals.html
(On Iphones only) For some reason the fixed elements of my website above stretch across to the end of the last overflow element instead of ignoring the overflow and treating the width of the device itself.
Stranger still, on the IPAD it works fine.
I've tried these viewport meta tags:
<meta name="viewport" content="width=568px, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0,">
And some others along these lines.
I have also trawled online for solutions and tried everyone but without success. Mostly the suggestions that says to use a different position that locks the entire site and disables the navigation to the overflow elements - which is obliviously undesirable.
Here is the elements in question:
<div id='back-nav'>
<a id='bk-to-start' href='j-a-allan-childrensbooks.html'>Back to the Start</a>
<a id='bk-to-sib' href='siblings.html'>Back to Animals</a>
</div>
<div id='main-nav-wrap'>
<ul id="ani-menu">
<li><a id='ani' class='scroll-hori' href="#animals">Animals Vol. 1</a></li>
<li><a id='ele' class='scroll-hori' href="#elle-wrap">Ellie the Acrobat Elephant</a></li>
<li><a id='rat' class='scroll-hori' href="#rat-wrap">The Runaway Rat</a></li>
<li><a id='vic' class='scroll-hori' href="#vic-wrap">Victor the Vegetarian Vulture</a></li>
</ul>
</div>
<div id="title"></div>
<h2 id='title2'>Written & Illustrated by James Allan</h2>
And CSS with Media Queries
media screen and (max-width: 736px) and (min-width: 568px)
#back-nav {
margin: 1% 0 0 3%;
z-index: 1002;
}
#back-nav {
width: 100%;
position: fixed;
z-index: 1002;
margin: 0.7% 0 0 5%;
#main-nav-wrap {
position: fixed;
width: 100%;
z-index: 999;
#media screen and (max-width: 736px) and (min-width: 568px)
#ani-menu {
width: 78%;
margin: 3.5% 0 0 5%;
}
#ani-menu {
width: 9%;
padding: 0;
margin: 4% 0 0 6%;
z-index: 1001;
}
#media screen and (max-width: 736px) and (min-width: 568px)
#title {
margin: 1% 0 0 27%;
width: 47%;
height: 25%;
}
#title {
background-image: url(../optimised/animals-title.jpg)!important;
background-size: 100% !important;
background-repeat: no-repeat !important;
z-index: 998;
margin: 1% 0 0 29%;
width: 42%;
height: 25%;
position: fixed;
}
#media screen and (max-width: 736px) and (min-width: 568px)
#title2 {
font-size: 11px;
margin: 5.5% 0% 0% 0%;
}
#title2 {
width: 100%;
text-align: center;
font-size: 1.3vw;
font-weight: 500;
margin: 4.5% 0% 0% 0%;
color: #000;
position: fixed;
z-index: 999;
}
If anyone can view this on an Iphone (I have only tested on Iphone 5) to see what is happening, any help stopping me from breaking some fundamental design ethics to depressingly act as a work around would be unfathomably appreciated...
Do I have to add some link or file to get media queries to work. When I try to use a media query inline in a .cshtml file I get a red line under '#media' that says "cannot resolve symbol media". This is in a asp.net mvc project. When I move the media query to it's own .css file it works fine. Are media queries not allowed inline in a asp mvc project?
Here is what solved it.
##media only screen and (max-width:768px) {
/* only size 'xs' and below */
.searchResults {
height: 100%;
}
I added two # symbols.
I got it to work by putting the media query into a .css file. When it was inline in the .cshtml file it didn't work. Code below
<style>
html,body,.container-fluid,.row {
height: 100%;
}
.row > div {
height: 100%;
}
.row .col-md-5 {
background-color: #eee;
top: 51px;
/*border: 1px solid black;*/
height: calc(100% - 51px);
padding-left: 0;
padding-right: 0;
}
.row .col-md-7 {
background-color: #ddd;
top: 51px;
/*border: 1px solid black;*/
height: calc(100% - 51px);
padding-left: 0;
padding-right: 0;
}
#googleResultMap {
width: 100%;
height: 100%;
/*border: 1px solid black;*/
}
.searchFilter {
/*width:200px;*/
height: 20%;
border: 1px solid blue;
}
.searchResults {
height: 80%;
border: 1px solid green;
overflow-y: scroll
}
input[readonly].default-cursor {
cursor: default;
}
#media only screen and (max-width : 768px) { // does not work
/* only size 'xs' and below */
.searchResults {
height: 100%;
}
}
</style>
<link href="~/Content/MediaQueries.css" rel="stylesheet" /> //works
What you have done is that you not specified the media rule
your code should be something like
#media screen and (max-width: 300px) { ... }
Edited:
At the top of your webpage add this line of the code in the <head> tag
<meta name="viewport" content="width=device-width, scale=1.0" />
Then in the style defination:
#media screen and (max-width: 768px) {
.searchFilter {
height:100%;
}
}
I'm using bootstrap on this site; http://toothimplants.com/indexTest.html My media Query for iPhone portrait is working, but I can't get my iPhone landscape code to work. What i'm trying to do is get rid of the background image on iPhone landscape. I'm targeting the iPhone 4 and testing it on my iPhone 4.
Here is my media query code on a external CSS. For full CSS see http://toothimplants.com/screen2.css
/* ---------------- Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px)
and (orientation: portrait) {
html,
body {
height: 100%;
background-image: none;
background-repeat: no-repeat;
background-attachment:fixed;
background-color: #fffff0;
background-size: cover;
}
.iphone {
margin: 30px 0 30px 0;
padding:50px 0 0 20px;
height: 100%;
width: 400px;
background-image: url(_images/toothimplants-iphone_div-background.jpg);
background-repeat: no-repeat ;
background-size: cover;
}
h1 {font-size: 330% !important; margin-top:-90px !important; line-height:100% !important}
h3.phone { padding-left:0 !important; font-size: 150% !important;}
h3.phone-1 { width: 350px;
}
.phone-2 {
width: 360px;
}
.phone-3 {
width: 400px; padding: 10px;
}
.phone-4 {
width: 360px; margin:0 0 40px 0 !important;
}
.phone-5 {
margin:0 0 20px -15px !important;
}
/* ---------------- Smartphones (landscape) ----------- */
#media only screen
and (min-device-width : 321px)
and (max-device-width : 480px)
and (orientation : landscape) {
html,
body {
height: 100%;
background-image: none !important;
background-repeat: no-repeat;
background-attachment:fixed;
background-color: #fffff0;
background-size: cover;
}
}
****Here is the head html;****
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.ico">
<title>ToothImplants.com</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Adobe Typekit -->
<script type="text/javascript" src="//use.typekit.net/hun6djw.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
Thanks for your help,
Greg
Try this: CSS media queries for different devices and screen dimensions
I've done a fair amount of research on this, but have been unsuccessful in figuring this out. I'm working with a responsive site using the lessframework.css for the responsive grid. It is not properly snapping to any tablet size between 768px and 1024px. When I inspect the elements at that screen size, it appears that the .container is not resizing between those dimensions. However, I don't see anywhere in my css where this is designated to a specific px size, therefore overriding it. I picked this project up from a previous developer, and I am new to responsive code. Any help that can be given would be a huge help. Thank you!
Website is www.mereo.co
Here's a sample of the code from the lessframework.css grid:
/* Default 8-column layout
60 px columns, 24 px gutters, 60 px margins, 768 px total
---------------------------------------------------------
1 2 3 4 5 6 7 8
60px 144px 228px 312px 396px 480px 564px 648px */
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
#if-logged-in {
position: relative;
width: 100%;
height: 24px;
line-height: 24px;
background: #000;
color: #aaa;
font-size: 10px;
z-index: 1000;
}
#if-logged-in .container {
padding-top: 0;
padding-bottom: 0;
}
#if-logged-in p {
margin: 0;
}
#if-logged-in a:link,
#if-logged-in a:visited {
color: #fff;
text-decoration: none;
}
#if-logged-in a:hover {
text-decoration: underline;
}
#if-logged-in a:active {
text-decoration: underline;
margin-bottom: -1px;
}
.container {
/*padding: 0 60px;*/
width: 768px;
margin: 0 auto;
overflow: hidden;
}
#header-image {
padding: 0;
overflow: hidden;
}
/* HEADER IMAGE
full size - 1068x300
8 column layout resized to 890x250 displayed at 648x250
5 column layout resized to 534x150 displayed at 396x150
3 column layout resized to 365x100 displayed at 228x100
*/
#header-image img {
width: 890px;
height: 250px;
margin-left: -121px;
padding: 0;
}
#content {
width: 356px; /* 5 columns */
margin: 0;
padding: 20px;
overflow: hidden;
}
#sidebar {
width: 184px; /* 3 columns */
margin: 0;
padding: 20px;
overflow: hidden;
}
::selection {
background: #c6d8cd;
}
::-moz-selection {
background: #c6d8cd;
}
img::selection {
background: transparent;
}
img::-moz-selection {
background: transparent;
}
the .container { } styles specific to that ipad size and resolution should be inside the media query you have there. So if the container should be 400px wide on an iPad, then your code should be:
/* iPad 1 & 2 (landscape) */
#media (device-width: 1024px) and (device-height: 768px) and (orientation: landscape) {
.container {
width: 400px;
/* all other .container styles specific to the iPad 2 in landscape should go here */
}
#if-logged-in {
/* other styles go in their respective selector in the media query */
}
}
Don't forget that there is an iPad without the retina display, and one with which means if you have any background images or svg images loading from css those should be set to point to the assets that are 2x resolution to look good on retina iPads inside the retina iPad media query.