I'm using jquery to remove a div to make my home screen look different on small screens and it's working fine on a Macbook Air and Iphone X. However on Android the div isn't removed and replaced as intended. This is the address for the website draft:
http://projetocc.learningtodom.com/
This is the code for the jquery bit:
<script>
$(function(){
if (window.matchMedia("(max-width: 750px)").matches) {
$('.desktop').remove();
}
});
$(function(){
if (window.matchMedia("(min-width: 750px)").matches) {
$('.mobiles').remove();
}
});
</script>
Let me know if you need me to post some css code as well.
If you don't have any success with your javascript approach, maybe you could consider using CSS and media queries. You may find that it's easier and gives more consistent results.
Simply add a viewport meta tag in the head of your document
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
And then in your CSS add the following
#media(max-width:750px){
.desktop{
display:none;
}
}
#media(min-width:751px){
.mobiles{
display:none;
}
}
I made a minor change to one of your breakpoints. With the code you had posted, both the mobile and desktop divs would be hidden at 750px.
I hope this helps!
I want to dynamically change meta tag viewport in "index.html" in windows phonegap app on button click.
I am using
Windows OS 8
phonegap 3.5
Device Nokia Lumia 1320 with windows 8 OS
I want to change below meta tag
<meta id="viewport" name="viewport" content="width=device-width">
to
<meta id="viewport" name="viewport" content="width=720">
I have already tried below URLs but nothing worked for windows phone.
how to set viewport so it is 380x800 or 800x380 depending on orientation?
Setting the Viewport to Scale to Fit Both Width and Height
Here I found link where it says it is not possible to change meta tag dynamically in winodws 8 OS
http://www.quirksmode.org/blog/archives/2011/06/dynamically_cha.html
Try to detect the device/OS and change the meta tag accordingly http://www.sitepoint.com/detect-mobile-devices-jquery/
1st write simple function JavaScript for example I have written one function viewport()
<html>
<head>
<script>
function viewport(){
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode(
"#-ms-viewport{width:auto!important;zoom:1!important;}"
)
);
msViewportStyle.appendChild(
document.createTextNode(
"#-ms-viewport{height:auto!important}"
)
);
document.getElementsByTagName("head[0].appendChild(msViewportStyle);
}
</script>
</head>
<body>
<button id="btnSubmit" onclick="viewport();">changeviewport</button>
</body>
more..[1]:Can I change the viewport meta tag in mobile safari on the fly?
To elaborate more on my question, I designed a website specifically to be viewed on a desktop. It does not look good if being tested on a mobile device. Therefore, I made a complete different layout for my website (containing all of the same content) by using jQuery mobile (due to its simplicity).
I realize now that there were probably better ways in doing this, such as implementing the mobile view in my CSS file, based on media queries, but this is the way that I chose to do it and would prefer to stick with it.
So here's my problem:
I want to use my JavaScript file to detect the different screen sizes, in order to display the desktop view or mobile view, based on their specified screen width and height. As of now, my desktop view and mobile view are in two different html files, and I know that is not good.
I don't want two html files, I want to combine the two! That's the only way I would be able to call the two different codes in my .js file, correct? Does anyone know how to do this?
In my mobile view file, I needed to include the jQuery libraries. Without those, it will not work. But when I tried including that in my desktop view file (since I am now trying to combine the files), I tested it alone with just that and it completely messed up the view on my desktop. How do I solve this?? Other than that, I'm assuming I would just separate the codes with two different 's as far as combining the rest of the code, yeah?
For example,
<div id="desktop"> ..... </div> <!-- this is for desktop view -->
and
<div id="mobile"> ..... </div> <!-- this is for mobile view -->
Please, any help would be so appreciated. I've tried researching this, but I can't find anything specific enough to answer my questions.
Here is the beginning of my desktop view file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="hwk5.css">
<script type="text/javascript" src="hwk5.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
And here is the beginning of my mobile view file:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<style>
img.fullscreen {
max-height:50%;
max-width:50%;
}
</style>
</head>
<body>
As I said in my comment, you could just detect mobile browsing with PHP and redirect the user to the desktop or mobile site accordingly, but if you really want to do this with jQuery, it is possible.
You would want to check the page width onReady and onResize:
$(document).ready(function(){resize();});
$(window).resize(function(){resize();});
function resize()
{
var mobileMaxWidth = 640; //Define this to whatever size you want
if($(window).width() > mobileMaxWidth)
{
$("div#desktop").show();
$("div#mobile").hide();
}
else
{
$("div#desktop").hide();
$("div#mobile").show();
}
}
JSFiddle
As far as jQuery messing up your desktop site, you must be using another DOM. Are you importing MooTools or another popular DOM that uses $? If so, you would need to explicitly mark jQuery code as jQuery("selector")... instead of $ or use jQuery.noConflict.
For more information, see this post.
I Suggest You To Write Two Seperate CSS Files... One For Desktop And Other For Mobile. And According to the current screen size change the css files using javascript.
To achieve this You Can Use this script
<script type="text/javascript">
$(document).ready(function () {
changecss();
});
$(window).resize(function () { changecss(); });
function changecss() {
var windowwidth = $(window).width();
var windowheight = $(window).height();
if (windowwidth >= 1024 && windowheight >= 768) {
//alert('Screen size: 1024x768 or larger');
$("link[rel=stylesheet]:not(:first)").attr({ href: "Style2.css" });
}
else {
$("link[rel=stylesheet]:not(:first)").attr({ href: "Style1.css" });
}
}
</script>
HTML
<div>
The colour of this text will change.
</div>
How do I hide the address bar on iPhone?
I tried two different methods so far:
The scroll down one pixel trick with JavaScript on page load
And the following meta tags:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /><meta name="apple-mobile-web-app-capable" content="yes" />
Also this:
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
I am completely confused.
PS: Oh, I forgot a really important thing: the web page itself does not overflow the browser window. It probably is the reason why the 1 pixel scrolldown trick does not work.
I can't make it bigger, since the hit thing about the design, that everyone can scroll, but this page folds... :)
I just hit this myself. If the address bar is not hiding, the reason may simply be the page is not long enough to scroll.
When the
window.scrollTo(0,1)
is called the page MUST be longer than the window so a scrolling event can occur.
Only when the scrolling even occurs will mobile safari hide the address bar.
đź”´ UPDATE: Apple removed support for minimal-ui in iOS 8 so this is no longer a useful answer :(
For new googlers looking into this: As of iOS 7.1 there's a new minimal-ui mode that works on mobile Safari:
It's enabled by setting the minimal-ui property on the viewport:
<meta name="viewport" content="minimal-ui">
You can also use it in conjunction with other properties like so:
<meta name="viewport" content="width=device-width, minimal-ui">
Of note, there's no minimum content length requirement as there is with the scrollTo hack. There's a great overview of this new mode here. (That's where the above image comes from.) He also lists some shortcomings.
The only official documentation I could find on this is a note in Apple's iOS 7.1 release notes:
A property, minimal-ui, has been added for the viewport meta tag key that allows minimizing the top and bottom bars on the iPhone as the page loads. While on a page using minimal-ui, tapping the top bar brings the bars back. Tapping back in the content dismisses them again.
For example, use <meta name="viewport" content="width=1024, minimal-ui”>.
Of course, since this only works in iOS 7.1 and above, it's usefulness may be limited.
Unless something has changed in recent iOS versions, the scroll down trick is the only one that reliably works, I've had no issues with this version:
/mobile/i.test(navigator.userAgent) && !location.hash && setTimeout(function() {
window.scrollTo(0, 1);
}, 1000);​
I didn't care about any other mobile platform for this particular page though, it was redirecting based on agent...you may want to change the regex to check for iPhone specifically, e.g. replace /mobile/ with /iPhone/.
I think this version is actually better. It tests to see if the user has already begun scrolling, which is an issue I noticed in my mobile project.
/Mobile/.test(navigator.userAgent) && !location.hash && setTimeout(function () {
if (!pageYOffset) window.scrollTo(0, 1);
}, 1000);
You can run the function when the site content is ready instead of using timeout
addEventListener("load", function() {
window.scrollTo(1, 0);
}, false);
Try:
setTimeout(function () {
window.scrollTo(0, 1);
}, 1000);
If using jQuery, put it at the end of $(document).ready();. The time-out allows for the browser to determine the height of the page...
In case none of these solutions work and you are running into the very narrow issue that I faced, here's what fixed it for me.
I had this in my CSS
html{position: relative; height: 100%; overflow: hidden;}
This css applies a fix to one of my pages only, so I restricted it with a condition to that page, and the address bar is now behaving correctly on all other pages.
I have been searching around on this full screen web app as well and i found this.
http://www.onlywebpro.com/2015/07/19/optimizing-full-screen-mobile-web-app-for-ios/
Basically you need add the following in your header:
<meta name="viewport" content = "width = device-width, initial-scale = 1.0, minimum-scale = 1, maximum-scale = 1, user-scalable = no" />
//App name
<meta name="apple-mobile-web-app-title" content="App name" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
//APP ICONS
<link rel="apple-touch-icon" href="/img/icon.png">
<link rel="apple-touch-icon" sizes="76x76" href="/img/icon.png">
<link rel="apple-touch-icon" sizes="120x120" href="/img/icon.png">
<link rel="apple-touch-icon" sizes="152x152" href="/img/icon.png">
Open the site in Safari
Tap on the "Open with" icon ( arrow pointing upwards and box below it) beside refresh button at the URL bar
Select "Add to home screen"
Go to the homescreen and open the "App name"
Voila! website with no URL bar or navigation buttons!
<meta name="apple-mobile-web-app-capable" content="yes" />
iPhone Configuring Web Applications
I think it will never be solved unless the content is more than the browser window.
Here is some code that will hide the URL on load, on orientation change, and on a touchstart (the touchstart should only be used if you have a persistent hidden URL, which is a whole other can of worms - if you don't, remove that part of the script).
if( !window.location.hash && window.addEventListener ){
window.addEventListener("load", function() {
setTimeout(function(){
window.scrollTo(0, 0);
}, 0);
});
window.addEventListener( "orientationchange",function() {
setTimeout(function(){
window.scrollTo(0, 0);
}, 0);
});
window.addEventListener( "touchstart",function() {
setTimeout(function(){
window.scrollTo(0, 0);
}, 0);
});
}
<meta charset="utf-8"><meta name="description" content="{MF_PLUGIN_SETTING:HOME_DESCRIPTION}"/><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1"/><meta name="apple-mobile-web-app-capable" content="yes"><meta name="mobile-web-app-capable" content="yes">
This is used for adding a ios web app to the homescreen without the searchbar.
I used to be able to get hold of
$('[data-role=header]').first().height()
in alpha with jQuery 1.5.2, but no longer can in beta with jQuery 1.6.1. Has something changed?
Full code - this writes 0 to console.log...
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
console.log($('[data-role=header]').first().height());
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
//lots of code
</div>
</div>
</body>
</html>
However, change this to jQuery 1.5.2 and jQuery Mobile alpha:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
and it writes the non-zero height of the header div.
Incidentally, it is also non-zero with jQuery 1.6.1 but without jQuery Mobile. So it's something to do with the jQuery Mobile rendering.
Can't see anything in the release notes to suggest what might have happened, but I'm no jQuery expert.
The change that is causing the difference is "Responsive design helper classes: Now deprecated"
We include a set of responsive design helper classes designed to make it easy to build a responsive design that adapts the layout for various screen widths. At the time, we went with a system of dynamically appended min- and max-width classes on the body that are updated on load, resize and orientation change events as a workaround for the limitation that Internet Explorer doesn’t support media queries.
Basically, the page is getting min-height set to the current page height in the beta which is overriding the .landscape { min-height: 300px; } in the alpha.
It looks like you need to use CSS Media Queries if you want a page layout that changes or you could just add CSS style="height:43px" on the the header if you need a fixed height.
Seems like the page is not ready when you query the height(). There is no document.ready for jQuery.mobile. It doesn't explain why there is a difference between alpha and beta, but I guess a code path changed that exposed the issue.
Wrapping the query in a different event, returns the height as expected.
$("div:jqmData(role='page')").live('pageshow',function(){
console.log($('[data-role=header]').first().height());
});
I found this by examining the offsetHeight of the DOM element in the Chrome console which was non-zero but, as you reported, the height() was always reporting 0. I then created an link when clicked output the height and it was non-zero. I then realised that the height() was being called before the page was fully ready.
Relevant - jQuery mobile $(document).ready equivalent
Looks like they did change some of the syntax, Docs:
http://jquerymobile.com/demos/1.0b1/docs/api/methods.html
When finding elements by their jQuery
Mobile data attribute, please use the
custom selector :jqmData(), as it
automatically incorporates namespaced
data attributes into the lookup when
they are in use. For example, instead
of calling $("div[data-role='page']"),
you should use
$("div:jqmData(role='page')"), which
internally maps to $("div[data-"+
$.mobile.ns +"role='page']") without
forcing you to concatenate a namespace
into your selectors manually.
Try this:
$("div:jqmData(role='header')").first().height()