How can I make an ad visible only to mobile users? - javascript

I want to use some mobile ads but my website has responsive design so I don't use the m. subdomain.
How can I make an ad visible only to mobile users? What about only to desktop or tablet?
I'm using wordpress as a CMS.
Thanks,

It's quite easy using CSS3 Media Queries.
In your CSS:
#media (max-width: 480px) {
#ad-id {
display: block;
}
}
For bigger devices, hide it:
#media (min-width: 480px) {
#ad-id {
display: none;
}
}
If you are really concerned about data being downloaded, then you must detect the browser size on page load, if it's less than particular width then fire an ajax call and fetch the ad data and display it inside the placeholder container.
$(function() {
if($(window).width() < 480) {
$("#ad-id").load("adcontent.html");
// else use $.ajax for this purpose
}
});

Please use css media queries. you can show and hide specific div for mobile devices.
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) { }

One way is to use media queries. Make the ads as display:none by default and add display:block only in media queries for mobile.
.ads{
display:none;
}
#media (max-width:480px){
.ads{
display:block;
}
}

Despite the seeming simplicity is quite a tricky question.
Try not to waste time (which has already been spent by other developers) and use one of the existing solutions like isMobile or mobile-detect.js.
This libraries allows you to detect:
is mobile, tablet or desktop;
specific browser version.
operating system;
...

You can do it using CSS3 media queries,
//medium+ screen sizes
#media (min-width:992px) {
.desktop-only {
display:block !important;
}
}
//small screen sizes
#media (max-width: 991px) {
.mobile-only {
display:block !important;
}
.desktop-only {
display:none !important;
}
}
for large resolution devices you can use following media queries,
//large resolutions only
#media (min-width: 1200px) {
...
}
Also if you are using any front-end framework like bootstrap. then you can find some written classes like
.visible-phone
.visible-tablet
.visible-desktop
.hidden-phone
.hidden-tablet
.hidden-desktop
using these classes you can play around your content to show and hide on specific devices.
http://getbootstrap.com/2.3.2/scaffolding.html

Related

Page visibility when resizing

I am creating a webpage and when I resize the window it kind of starts to mess up. Text changes its position and so on. How is it possible to keep it beautiful even after resizing the window? Maybe there are some video courses? Thanks in advance!!
lots of video courses are available. You can search by "Responsive layouts" keyword. But you can get rid of easily. All you need is standard media queries. Put this media queries in the end of your .css file and start styling according to your screen size. (e.g for mobile size use (max-width : 767px) etc..)
#media only screen and (max-width : 1200px) {
}
#media only screen and (max-width : 979px) {
}
#media only screen and (max-width : 767px) {
}
#media only screen and (max-width : 480px) {
}
#media only screen and (max-width : 320px) {
}
You are looking for css media-queries it is a broad subject. So I can not point to exact destination to go. But the are tons of material on youtube pertaining those subject. You could also tried https://scrimba.com/ for interactive tutorial.
CSS media queries can help. They let you make rules in CSS about how you want different elements on your webpage to display when the screen size changes, or when it is displayed on a smaller or larger screen to begin with. Here is a good introduction: w3schools: CSS Media Queries.
Basically, you set "breakpoints" and the styles you want for those breakpoints:
#media screen and (min-width: 500px) {
body {
margin: 10px;
}
}
More examples: w3schools: CSS Media Queries - Examples

How to not load images for smaller screen

I have come across numerous solutions from different articles but which one would put the least strain on the CPU?
There is
https://scottjehl.github.io/picturefill/
https://github.com/teleject/hisrc
but which one is recommended and has the best compatibility with browsers?
It depends on what you plan on doing. If you don't want elements to have a background image if the screen size is too small then you could use media queries e.g.
#media screen and (max-width: 300px) {
body{
background-image: none;
}
}
}
#media screen and (min-width: 301px) {
body{
background-image: url("/url/to/image.jpeg");
}
}
}
But if you want to control whether a certain image tag's source is loaded you could do this:
if(screen.width > 300) image.src = "/url/to/image.jpeg";
On the other hand, you could just hide the image tag using the same media queries
Use the css #media to detect the screen width to control whether load or not load image.
#media screen and (max-width: 400px) {
img {
display: none;
};
}
or use javascript.
$(document).ready(function(){
if (screen.width <= 400px) {
$("img").css('display', 'none');
}
}
);

How to adjust contents to automatically fit size of the screen?

I have an requirement that an application(HTML, CSS and Javascript) should adjust automatically to screen window size - from laptops, to desktops to tablets.
Does anyone know how can this be done?
You need to study Responsive Design. But I'll tell you the big key: media queries.
With CSS like this
#media only screen and (max-width: 500px) {
#mydiv {
width: 80%;
}
}
#media only screen and (min-width: 501px) {
#mydiv {
width: 50%;
}
}
you can do all you need. In fact, for some screen sizes you can set #menu1 to display:none, and #menu2 to display:block, and thereby show entirely different layouts dynamically based on the screen size.
Try this link for a very minimal example you can play with
http://www.w3schools.com/css/tryit.asp?filename=tryresponsive_breakpoints

Change Background Image on Fly

This question has been asked however, not particularly to the effect that I'm trying to accomplish....
I just finished a Javascript course, and wrote a small script for my website.. It uses Gantry Framework and works really well with Mobile Devices.
If you use your phone, and hold your phone horizontal it resizes that page, if you then turn your phone to vertical it resizes the page yet again.
So I wrote this
var cWIDTH = window.innerWidth;
if (cWIDTH < 640 ){
document.getElementById("swapme").style.backgroundImage = "url('/images/backgrounds/top-image2.jpg')";
}
However, it wont change on the fly, for example.. if I turn my phone it wont change the background unless I refresh the page. I have been looking within the files on my site for the Ajax/jQuery/JSON code that seems to react to this change so I could possibly insert a function trigger.
However once the page loads isn't the variable set already until you refresh the page?
How do I get the variable on the fly, and change on the fly as well?
As has been noted, you'd be better off using CSS media queries.
Try something like this:
#media screen and (min-width: 641px) {
#swapme {
background-image: url('/images/backgrounds/top-image1.jpg');
}
}
#media screen and (max-width: 640px) {
#swapme {
background-image: url('/images/backgrounds/top-image2.jpg');
}
}
You need to hook that code you wrote to the window.onresize event, and include an else clause for when the window size is switched back.
Having said that, the result is far easier to achieve without JS at all using media queries.
below some example code i used with phonegap to change the layout. It makes use of the media query's of css 3.
/* Ipad landscape mode */
#media screen and (min-width: 760px) and (max-width: 1024px) and (orientation: landscape) {
article {
float:left;
padding-left: 55px;
}
}
/* Ipad portrait mode */
#media screen and (min-width: 760px) and (max-width: 1024px) and (orientation: portrait) {
article {
float: left;
width: 340px;
padding-left: 15px;
}
}
There is and event that detects when the device orientation changes.
window.onorientationchange = function(e) {
switch(e.orientation) {
case 0:
//...
break;
case -90:
//...
break;
case 90:
//...
break;
default:
break;
}
}

image height based on mobile orientation

I have a problem with a small mobile image gallery. When I change the orientation to portrait the images are too large to be displayed on the screen.
Is it possible with some javascript to make images fit the screen when the orientation changes to portrait? In landscape mode, everything looks fine.
yes, you can use CSS3 Media Queries without using JavaScript.
#media screen and (max-width: 450px) {
img {
width: 30%;
}
}
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
Try this:
#media screen and (orientation:portrait) {
//your css code goes here
}
#media screen and (orientation:landscape) {
//your css code goes here
}

Categories

Resources