I've been tasked with making a web application more mobile-friendly. I'm running the app through PhoneGap to get the mobile build, but testing its appearance beforehand using the Ripple Emulator.
PhoneGap works pretty well on the app, but there's a kind of "control panel" whose width does not change, and it makes it so that this control panel takes up the majority of the width of the mobile view, which is no good.
So essentially, I need to edit the current JavaScript file so that it detects whether the viewer is a mobile device, and adjust the width of this control panel element accordingly. Unfortunately, I am basically brand new to all web development..
So as a general question, how would I go about doing this? I think I need to make these adjustments before the page is actually loaded, but I'm not sure of where in the JS file this would happen. The client is using JQuery Mobile and a few other libraries. The original developer is already using the
<meta name="viewport" content="width=device-width, initial-scale=1" />
tag, but it has no effect on this control panel section, and the width of the control panel's elements are hard-coded in.
This is a pretty vague question, but I'd appreciate any tips or guidance.
You may want to check out "responsive" design. Specifically, I've really liked Bootstrap's implementation. It is all CSS controlled and is based on the viewport pixel width.
You can create responsive CSS by using the following "#media" css code:
#media (max-width: 240px) {
/* really tiny screens */
}
#media (min-width: 241px) and (max-width: 319px) {
/* a little bit bigger screens */
}
#media (min-width: 320px) and (max-width: 767px) {
/* Basically up to, but not including an iPad */
}
#media (min-width: 768px) {
/* iPad and bigger */
}
Inside each #media tag, you can place your custom CSS for each size, so at 240px, you might have a title class with a font size of 16px:
#media (max-width: 240px) {
/* really tiny screens */
.title {
font-size: 16px;
}
}
Then rinse and repeat to change the font sizes for each subsequent viewport size.
Use orientation specific CSS such as:
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
Set the viewports setting to the devices max width and take care of the actual width of the content using CSS:
<meta id="viewport" name="viewport" content="initial-scale=1.0;minimum-scale=1.0; maximum-scale=1.0" />
In this case, I'd recommend using Media Queries.
#media (min-width: X) and (max-width: Y) {
/* CSS rules for screens of width between X and Y. */
}
Related
This question already has answers here:
How to change CSS when the screen size changes
(4 answers)
Closed 9 months ago.
I'm trying to make my footer responsive when screen size changes. Javascript works but its only when the page has been loaded. I dont know if there's way i can use html and css only......
var reswidth = window.screen.width;
var mql = window.matchMedia("screen and (max-width: 765px)");
if(reswidth < 756){
console.log(document.getElementById('logon-footer').children[0].setAttribute('style','position: static'));
} else if(mql.matches){
alert("Window is 800px or wider");
}
``
you can do that using The #media rule is used in media queries to apply different styles for different media types/devices.
Media queries can be used to check many things, such as:
width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution
Using media queries is a popular technique for delivering a tailored style sheet (responsive web design) to desktops, laptops, tablets, and mobile phones.
You can also use media queries to specify that certain styles are only for printed documents or for screen readers (media type: print, screen, or speech).
In addition to media types, there are also media features. Media features provide more specific details to media queries, by allowing to test for a specific feature of the user agent or display device. For example, you can apply styles to only those screens that are greater, or smaller, than a certain width.
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: yellow;
}
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<h1>The #media Rule</h1>
<p>Resize the browser window. When the width of this document is 600 pixels or less, the background-color is "light blue", otherwise it is "yellow".</p>
</body>
</html>
Summary: I am attempting to design a restaurant menu. When viewing the site on a desktop the user should see the entire menu i.e a category ('Appetizers') and all of the food entries in said category('Fried Calamari', 'Mozzarella Sticks', etc). However, when viewed on a mobile device I would like the entries to be hidden and the food categories to be buttons. When the 'Appetizer' button is clicked, the user should then see 'Fried Calamari', 'Mozzarella Sticks', etc. I feel like I am going about implementing this in a convoluted way. My code:
index.html:
<div class="food-section-heading" id="appetizers">Appetizers</div>
<div class="menu-item">
Fried Calamari
</div>
<div class="menu-item">
Mozzarella Sticks
</div>
using javascript to hide what's normally there and present the button:
/* Function definitions */
function hideElements(className){
elements = document.getElementsByClassName(className);
for(i = 0; i < elements.length; i++){
elements[i].style.display = 'none';
}}
function showElements(className, displayType){
elements = document.getElementsByClassName(className);
for(i = 0; i < elements.length; i++){
elements[i].style.display = displayType;
}}
/* Main Program */
//if iPhone X or smaller hide '.menu-item' elements
if(window.screen.availWidth <= 375){
hideElements('food-section-heading')
hideElements('menu-item');
}
/* Code to create button and show elements upon click event not included. I stopped writing it and came here because I feel I can't be doing this right*/
Is there any easier way to go about this? (A good example of what I am talking about is grubhub.com on mobile vs what grubhub.com presents on Desktop.)
There are many ways to go about displaying the same document differently on different devices.
When targeting desktop / laptop / tablet / mobile a usual starting point would be to choose whether you want to detect:
the browser viewport size / viewport orientation / device screen size; or
browser make and version; or
data related to the browser's touch capability
Then, you can use:
CSS #media queries (commonly used in Responsive Design)
Client side browser sniffing (via javascript)
Server-side browser sniffing (used in RESS / Responsive with Server Side)
Touch detection (again, via javascript)
and more.
Targeting via CSS #media queries for screen size
One of the more easily-implemented approaches is to deploy one or several CSS #media queries.
Here is a simple #media query targeting screen sizes which are 800px wide or narrower:
#media only screen and (max-width: 800px) {
.menu-item {
display: none;
}
}
Adding in #media query hover: hover | none
If you want more sophisticated targeting (e.g. in a situation where you don't want to target narrow browser windows on a desktop / laptop) you can target the screen size (as above) in combination with checking if the screen supports a hovering action (on the basis that if it doesn't it's very likely a touchscreen):
#media only screen and (max-width: 800px) and (hover: none) {
.menu-item {
display: none;
}
}
Older approach using device-size #media queries (not recommended)
Before the #media query hover: hover | none arrived, if you wanted more sophisticated targeting, you could target actual device sizes with a #media query:
#media only screen and (min-device-width: 320px) and (max-device-width: 480px),
only screen and (min-device-width: 320px) and (max-device-width: 568px),
only screen and (min-device-width: 360px) and (max-device-width: 598px) {
.menu-item {
display: none;
}
}
But in practice this tends to be less useful and harder to maintain.
I think you might find some useful information in this thread.
Writing for mobile is very different from writing for desktop. It would likely be best if you used a router to direct users to one page if they are on mobile, and the one you've already created if they are on desktop.
I want to make my styles responsive to the opening of the bookmarks bar in the browser.
I have a media query watching the height of the screen.
When I drag the screen manually (reducing its height) the media query works as expected.
However, when I open the bookmarks bar, the viewport shrinks (past the point where it should trigger the media query, as per Chrome DevTools) but nothing happens.
1.) Why might this be?
2.) Is there a best practice for dealing with the bookmarks bar changing the size of the viewport?
Update:
This is not a duplicate of this question.
That question asks if 100vh takes into account the bookmarks bar. I am asking why my media query does not respond to the bookmark bar changing the pixel height of the viewport.
Another update:
Link to example is here: https://n7m58rjj84.codesandbox.io/
Open in new tab, resize your window up and down and media queries work fine.
Try opening and closing bookmarks bar, and nothing happens.
Relevant code:
E.g. between small and medium breakpoints:
`#media (min-height: 720px) and (max-height: 760px) { ... }`
Using this simple code and switching the bookmark display on and off:
<html>
<head>
<style>
body {
background: #0f0;
}
#media (min-height: 720px) and (max-height: 760px) {
body {
background: #f00;
}
}
</style>
</head>
</html>
It works fine
tested in Chrome 72.0.3626.119
tested in Firefow 65.0.2 (with personal menu bar)
Make sure your tests includes the fact that you need to stay in this 40px range while modifying the viewport's height (760 - 720) otherwize the media query won't be tiggered
I am looking for a technique that will allow me to apply a certain CSS only if the current device (where my web-app runs) has a "small" screen – smaller than, say, 5 inches.
Some notes to make my question more clear:
It should not be based on screen resolution or density, because there are some tablets that have a small resolution and some smartphones that have a high resolution.
It also should not depend on current browser's window size. If it's a desktop then the CSS should not be applied even if the window was made small.
My web-app has two layouts. One is default and is optimized for desktops and tablets. Another layout is optimized for smartphones and should only be turned on on smartphones.
In my case nothing can be done on server-side. Different domains for each variant are not an option.
Thank you in advance!
Update
Here is a test page with my best try: http://jsbin.com/uXULOpe/2/
For Samsung Galaxy Nexus i9250 (4,5" sreen) it enables wrong style (".pad")... For iPad and WindowsPhone it seems to be working. Android seems to be thinking that it's width is at least 8 inches.
Source:
<!DOCTYPE html>
<html>
<head>
<title>M-Q test</title>
<style>
.always,
.desktop,
.pad,
.smart{
display: none;
}
.always{
display: inline-block;
}
#media only screen and (min-device-width : 10in) {
.desktop{
display: inline-block;
}
}
#media only screen and (min-device-width : 5in) and (max-device-width : 10in) {
.pad{
display: inline-block;
}
}
#media only screen and (max-device-width : 5in) {
.smart{
display: inline-block;
}
}
</style>
<meta name="viewport" content="initial-scale=1.0, width=device-width, height=device-height, maximum-scale=1.0; user-scalable=0;"/>
<meta name="HandheldFriendly" content="true" />
</head>
<body>
<ul>
<li>Always: <span class="always">x</span></li>
<li>Desktop: <span class="desktop">x</span></li>
<li>Pad: <span class="pad">x</span></li>
<li>Smartphone: <span class="smart">x</span></li>
</ul>
</body>
</html>
To use two Templates/Models/Propertys:
//controll the browser size and set Propertys
if( body.offsetWidth < 400 ){ /* Small Sized Propertys */ }
if( body.offsetWidth >= 400 ){ /* Big Sized Propertys */ }
To set sizes dynamic, use jQuery:
//this starts on every browser resize interaction
$( window ).resize(function() {
if( body.offsetWidth < 400 ){ /* Small Sized Propertys */ }
if( body.offsetWidth >= 400 ){ /* Big Sized Propertys */ }
});
But you need to include the jQuery Script in your Head. Its a big Framework.
I've problem with my css sheet of one page ,So been thinking to detect screen resolution if equal or less than 800 pixel width it will makes my css code is
<style>
body {width:1004px;}
</style>
but if it was greater than 800 pixel width, it will makes my css code is
<style>
body {width:100%;}
</style>
so anyone knows js code that code do it !!
i only care about width detection no need to detect the hights as well.
i've made search for alot of js code doing this but wasn't able to use to do this exact function of passing either of those css code into the page.
You can use CSS Media Queries
body {
width:100%;
}
#media all and (max-width: 800px) {
body {
width:1004px;
}
}