I have designed a website that uses a CSS hamburger menu to activate a slidebar with a links to different webpages on the site.
I also have written an iPhone/andriod apps that need to have an hamburger menu that open a slider work that run swift and android code.
I want to add to the iphone/android hamburger slidebar links to the website (which has it own hamburger menu)
How can I test on the website if it a mobile device or a PC, so I can turn off if "Website" hamburger if its a mobile, since I already have and need the hamburger menu on the mobile.
I have php on the website so I can remove the hamburger menu on the website if its a mobile.
This is the main page
<html>
<div class="w3-sidebar w3-bar-block w3-card-2 w3-animate-left" style="display:none" id="mySidebar">
<button class="w3-bar-item w3-button w3-large" onclick="w3_close()">Home</button>
Link 1
Link 2
Link 3
</div>
<div zclass="w3-main" id="main">
<div class="w3-teal">
<button class="w3-button w3-teal w3-xlarge" onclick="w3_open()">☰</button>
<div class="w3-container">
<h1>My Page</h1>
</div>
Thanks
so there are a few ways of doing this, but a really simple one is something like this:
var width = $(window).width(); //jquery
var width = window.innerWidth; //javascript
if(width > 1000){do large screen width display)
else{handle small screen}
of course 1000 is just an arbitrary number. it gets tricky because when you consider tables, there really are screens of all sizes so its up to you to determine what belongs where
How can I test on the website if it a mobile device or a PC, so I can
turn off if "Website" hamburger if its a mobile,
If I understood you correctly, you could use CSS #media -rules, to setup CSS rules that only apply to smaller devices. Below is a simple code-snippet example of a CSS media-query.
#media (min-width: 700px), handheld
{
.w3-sidebar
{
display: none;
}
}
Related
I am working on my website at the moment. And I realized, when looking at the mobile site that one of my images stretches/changes it's aspect ratio. Keep in mind this is only on iPhones. I had a few friends look at the site, and only the people with iPhones had the image stretched like this.
This is the page on the browser
This is the page on my iPhone 11
<div class="col d-flex d-md-flex d-xl-flex justify-content-center align-items-md-center">
<img class="d-xl-flex align-items-xl-center" src="assets/img/headshot.jpg" style="max-width: 90%;">
</div>
I originally had height: auto; in there as well, and when trying to solve this issue I found an older post saying that could be the issue. Sadly it did not resolve it.
I know I can easily solve this problem with media queries, but there must be a reason why this happens only on iPhone. I also only have in body styling on this image, you can see it on the browser preview on the inspector.
If you would like to look at it yourself. The Website URL is https://www.robinalexander.at/about-me
Try to remove the classes d-xl-flex align-items-xl-center from img and give it a display: block. The parent div will keep the img in place
Having problems with react router hash link on mobile.
On desktop its working great but on mobile its giving me an offset that it sometimes over 100vh away from my anchor tag.
This is where the links get set
<AnchorLink
to={`audio-demos/#${anchorTitle}`}
className={`item ${classItem}`}
style={{ backgroundImage: `url(${src})` }}
>
</AnchorLink>
This is where the id is set
return (
<>
<div className="spacer" id={id}></div>
<div className='demo-audio-container' >
<h2 >{title}</h2>
<div className='adverts-container'>
<div className='adverts-left'>
The site im developing is
https://ingrid-voice.netlify.app/
you can recreate the issue by opening devtools in chrome and going on iphone 5 or 7 for example. go to home page and click a link in the portfolio section. This takes you to audio page and an anchor link. On desktop works but on mobile anchor is not at top of screen.
Any ideas?
Thanks
I've managed to do a workaround by removing the animated hero image on mobile. Seems to have fixed the problem on my android but still seeing the problem on iphone 7.
Hopefully this is a simple answer. I have a page that on desktop needs a series of share icons (fb, tw, ig) underneath a paragraph of text. But on mobile, these icons are included in a template already so I don't need them to show. It looks repetitive. I am using a CMS and only have access to the body text of the page, not the headers, so extensive javascript isn't ideal. What inline CSS styling or other such magic will make this div disappear? And can I shrink it only on verified mobile devices or is it better to do it just with the browser window size?
Currently the code is very simple:
<html>
<body>
Some text here.
<div id="mydiv">
<img src="/some/icon1.png">
<img src="/some/icon2.png">
<img src="/some/icon3.png">
</div>
</body>
</html>
All I need to do is make "mydiv" disappear if I'm using an iPhone, iPad, or Android device...
Thank you!
You can use media queries:
A media query consists of a media type and zero or more expressions that limit the style sheets' scope by using media features, such as width, height, and color.
When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.
Documentation:
MDN
w3schools
For example:
#media (max-width: 787px) {
#mydiv {
display: none;
}
}
Some text here.
<div id="mydiv">
<img src="/some/icon1.png">
<img src="/some/icon2.png">
<img src="/some/icon3.png">
</div>
I am redesigning my site for mobile first. I have read a few stackoverflow questions relating to this but none seemed to be a complete answer. I searched the web and came across http://www.smashingmagazine.com/2013/04/03/build-fast-loading-mobile-website/
In the CODE FOR MOBILE-FIRST section, it says the best way to conditionally load images for different screen sizes. What I'm looking for is that, but for html elements.
<div class="social_buttons">
<ul>
<li>google</li>
<li>twitter</li>
<li>facebook</li>
<li>pinterest</li>
</ul>
</div>
I do not want this section of html to be loaded when loaded from a mobile device, however I DO want it when called from desktop computer.
Using the solution from smashingmagazine (conditionally loaded using css) is it possible doing it this way or does it just apply to images?
Thanks for any help =)
one way is to redirect and load different html based on the device.
check this Link.
or use jquery plugin Link.
I suggest using media queries to display respective content but using this method you load the whole HTML but display based on the device.
information about media queries -LINK
like this
<div class="social_buttons">
<ul>
<li>google</li>
<li>twitter</li>
<li>facebook</li>
<li>pinterest</li>
</ul>
</div>
css
#media (min-device-width: 640px) {
.social_buttons{
display:none;
}
}
You can do it with javascript. Just do what you want in case of mobile or desktop.
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// mobile
} else {
// desktop
}
I'm using Kendo Mobile and am testing a modal view out. My goal is to have the height of the modal view auto resize to the contents within it.
Here is what I currently have:
<div id="mPopover" data-role="modalview" style="width: 95%; height: auto;">
<div data-role="content">
<ul data-role="listview">
<li>...</li>
.
.
.
</ul>
</div>
</div>
This works as expected on all the mobile browsers I've tested (Android 2.3 stock browser, Firefox, Dolphin)... except Opera Mobile. I know Opera isn't claimed to be fully supported, but does anyone have a clue as to why the inline height value isn't being respected the same in Opera Mobile? All I see with Opera Mobile is a very thin strip of a modal view.
I am using the latest Kendo UI Mobile, Jquery, and Opera Mobile browser for Android 2.3.
Thank you
Kendo UI Mobile doesn't claim any support of Opera Mobile - many things will be broken there. There are several reasons for this - flexbox (now supported in the latest Opera), the inability to remove the tap outline and the horrible CSS transitions/transforms performance.
Figured out a solid workaround that correctly sizes all modal views using JQuery:
$(window).bind("load", function () {
// kendo rendering fix for windows phone 8 and opera mobile
// correctly sizes all modal views
$("[data-role=\"modalview\"]").each(function() {
$(this).height($(this).height());
});
});
Call this before invoking the modal 'open' call:
$(".km-modalview-wrapper").height('auto');
Also you must set data-stretch="true" to the modalview.