I want to exclude some HTML (basically, text ) when my PHP site loads on a smartphone. What's the best way to code that?
Thanks.
if "on a smartphone" means "on a small device", you could use Media Query , just with CSS.
<style>
#media only screen and (max-device-width: 480px) {
.hide-mobile{
display:none;
}
}
</style>
And use it where you want to hide at small devices:
<div class="hide-mobile">
Hey, this text is not visible at small devices
</div>
If you want to go really simple, just use mediaqueries in your CSS to make the div be display:none; for mobile.
#media only screen
and (max-device-width: 480px) {
.containeroftextyouwanttohide{
display:none;
}
}
Then the div holding the text you want won't show up on mobile. There are probably other ways to do it, but this is the easiest and probably best.
Related
So I'm trying to do a basic phone number swap so the number is clickable on mobile but not desktop.
I've been working with the following code (mostly targets iphone):
CSS
#phone .mobile {
display: none;
}
#media only screen and (max-device-width: 640px) and (min-device-width: 320px) {
#phone .mobile {
display: inline;
}
#phone .desktop {
display: none;
}
}
in head (used from h5bp)
<meta name="viewport" content="width=device-width, initial-scale=1">
Chrome and opera mini work fine but Safari is displaying BOTH numbers.
I notice Safari makes all phone numbers clickable. Could this be something to do with it?
you can achieve this with some javascript/jquery
1) check the window width
2) if this is more than a certain amount of pixel, then you can output a link without href, otherwise add your tel:39000000 or whatever :)
Ciao
Fabio
Notice how facebook's right hand, ~200px-wide, chat panel/column disappears when you shrink your window below a certain width. (It then switches to a pull-out menu at the bottom)
I presume this is some sort of responsive CSS - can anyone offer any guidance on how I can achieve a similar effect with a similar right-hand panel on my own site?
Yes, it's using CSS Media Queries.
<style>
#media (min-width: 701px) {
//css for wide screen
}
#media (max-width: 700px) {
//css for narrow screen
}
</style>
I'm trying to teach myself how to make a mobile version of a website, so I started off with something basic.
I have the following code
<body>
You are using...
<p class="mobile">
Mobile
</p>
<p class="desktop">
Desktop
</p>
</body>
with the CSS
#media screen and (max-width: 480px)
{
p.desktop {
display:none;
}
}
p.mobile {
display:none;
}
Basically, I want either "mobile" or "desktop" to display depending on which device you're using. When I navigate to the site on my desktop it says "desktop", so that seems fine.
But when I do so on my iPhone it still says desktop.
I have tried increasing the max-width to 640px which is the iPhone 4S' resolution. But I still have no luck. What am I doing wrong?
The default viewport on an iOS device is somewhere around 1000 pixels. You may notice when you pull up your test page that it doesn't look like it's a 320px wide - it's way zoomed out.
You need a viewport meta tag in your page head that sets the viewport width to that of the device:
<meta name="viewport" content="width=device-width">
Once in place, you'll find your #media query works nicely (although you need a p.mobile { display: block; } bit to make the "mobile" text show up).
I've been asked to retrofit an existing website with a mobile layout. The website was built on a Wordpress Twenty11 framework, so I decided to build the mobile layout using the existing media queries in that framework.
Now, my mobile layout looks great on any desktop browser dragged down to be less than 420px wide, but on iPhone & Android mobile browsers it just loads the full-width webpage anyhow. Full web experience, woot!
Client unhappy. Wants mobile design to show up on all iPhone browsers. So now I need to work out why the mobile browsers insist on showing the page at the full desktop width, ignoring the mobile CSS entirely.
Here's my media queries, down the bottom of the main style.css document:
#media (max-width: 800px) {
/* Design starts to get a little more fluid */
}
#media (max-width: 650px) {
/* Design gets quite a lot more fluid, and columns start dropping off the edge to below main content */
}
#media (max-width: 450px) {
/* Totally changed navigation for small viewports, main content takes up whole viewport */
}
All of these do what I want when I manually resize a browser window on a desktop machine. They also do what I want when I test them in next-to-useless iFrame-based "iPhone emulators". But all mobile devices so far tested stubbornly show the full-width layout, zoomed really far out and unreadable.
Is there something I should be adding to those media queries to MAKE the mobile browsers display the mobile CSS? Or should I be going with a different strategy altogether, such as user-agent detection or similar?
EDITED TO ADD:
Something like this line in header.php, I am guessing:
<meta name="viewport" content="width=960,
maximum-scale=1.0">
should in fact be
<meta name="viewport" content="width=device-width,
maximum-scale=1.0">
right?
You should add min-width parameters to your media queries because at the moment someone with a small screen will be getting rules from all three of your media queries since it's max width will be less than 800px.
#media (min-width: 651px AND max-width: 800px) {
...
}
#media (min-width: 451px AND max-width: 650px) {
...
}
#media (max-width: 450px) {
...
}
If you attempt to get too complex with media queries you'll run into tons of problems. Different browsers handle them differently making them less than ideal for a production environment.
A method that I like to use is to create a simple JS event handler for the window.resize event that only adds a class to the <html> element to specify what screen-break-point the user is at. Then in your CSS you just prefix rules with the breakpoint-classes:
$(window).on('resize', function () {
var w = $(this).width();
if (w > 1400) {
$('html').addClass('widescreen-viewport');
} else if (w > 1024) {
$('html').addClass('desktop-viewport');
} else if (w > 767) {
$('html').addClass('tablet-viewport');
} else {
$('html').addClass('mobile-viewport');
}
});
Sorry for the jQuery but this is a way I know works for sure.
Then your CSS would be something like:
#some-element {
/*default styles*/
}
.widescreen-viewport #some-element {
/*widescreen styles*/
}
.desktop-viewport #some-element {
/*desktop styles*/
}
.tablet-viewport #some-element {
/*tablet styles*/
}
.mobile-viewport #some-element {
/*mobile styles*/
}
This method will receive better browser support as it requires JS to be enabled but other than that, it'll work back to IE6/5.5 and other browsers from that time.
When I view www.americaspoeticsoul.com on my iPhone, the menu overflows for some reason. See:
And it even looks worst on the other pages because of the title:
Anyone know why it's like this? And is there a way to fix it? Here's the CSS for the menu:
/*Menu*/
#menu {
margin-bottom:15px;
width:450px;
}
#menu ul { /* remove bullets and list indents */
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li {
float:left;
}
#menu ul li a {
display:block;
padding:10px;
margin:2px;
background-color:#D41C1C;
text-decoration:none;
font-weight:bold;
font-size:15px;
color:white;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
#menu ul li a:hover {
display:block;
padding:10px;
margin:2px;
background-color:#FF1C1C;
text-decoration:none;
font-weight:bold;
font-size:15px;
color:white;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
#menu ul li a.current_link {
display:block;
padding:10px;
margin:2px;
background-color:#FF1C1C;
text-decoration:none;
font-weight:bold;
font-size:15px;
color:white;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
Thanks,
Nathan
As an iPhone user and developer - I wouldn't use a site like yours on the phone unless I really had to - it would require all sorts of zooming in before I could read or click on that menu.
If you have content that you would like to present via a menu on an iPhone, I would recommend detecting small-screen mobile browsers and redirecting them to a mobile specific menu at the very least - jQuery Mobile is so easy to use to create a menu.
This is just a response about iPhone or similar size screens - I'm sure you'd want to fix this on an iPad if it looks the same.
You're not setting an explicit width on the menu items which leaves their width at the mercy of the browser and how large the font-size + margins and padding end up being. In the case of mobile browsers (Android too), your width is just too much for the 450px that you have. Try dropping the font size a point or something.
You're discovering one of the downsides of relying on text/fonts within your menu system. There is way too much variability (OS, browser, device, etc.) to expect the text to always behave properly or even use the font you intended.
I use a graphically created menu system which never changes no matter what and a simple text menu in the footer as a fallback.
You could try adding this to your CSS file:
html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
This will stop Mobile Safari (and Windows Phone) from adjusting the size of your text in an attempt to make it more readable.
EDIT: If you only want to affect the text-size-adjust on mobile phones, you could use a media query:
#media screen and (max-device-width: 480px) {
html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
}
If you're feeling ambitious, you should consider adjusting the layout on a more fundamental level for smaller screen sizes. Any CSS you put inside that media query will get applied to devices that have a screen size of 480px or less.
For example, the buttons may be a bit too small for fingers to reliably tap on them. A better alternative would be to linearize the layout so that there's only one column and each link button takes up the full width of the screen.