Change file ( jpeg , gif or swf ) according to screen size?

Asked

Viewed 110 times

-1

I have a Site in PHP and it has a field for advertising ( Where I can paste codes )

As it is a site that resizes I have no idea how to make an HTML or JAVA code use different images for the same advertising space ( multiple files for different dimensions - Pc or Mobile )

For example :

In Field X I can use ( paste ) a code that allows me to use two files for different dimensions

for example:

Size 230x90 px for Cellular Size 978x90 px for PC

Can someone help me ? I will be very grateful kkkkkkk

I found several codes, but I could not

javascript html css

  • I think this idea will work for you https://answall.com/questions/57828/mudar-banner-deacordo-com-tamanho-de tela

  • I saw here, but I could not understand where I direct the files in these codes.

  • There are a multitude of screen sizes, it would not be better to already detect whether it is mobile or not and insert the corresponding file?

  • That !!! because I want to talk to you to be understood and I end up being in the way. , I seek a code that helps me in this, that when accessing on the phone it looks for the file x , and when accessing on the pc it looks for the file y

  • It would be something like this, but I can’t imagine what to call or say which file it should call when it is in this dimension. @media(max-width: 500px){ . text{ font-size: 10px; color: black; } } ignore the code, just one example

  • Uai, the question is to change ( jpeg , gif or swf ) according to screen size, and in the comment it is a CSS

  • yes change, regardless of how to do.

Show 2 more comments

2 answers

3


You can use images like background in Divs and use media-query to adjust, an example if you have two images:

<style>
.banner-1 {
    background: url(images/normal/banner1.jpg);
    display: inline-block;
    width: 978px;
    height: 90px;
}

.banner-2 {
    background: url(images/normal/banner2.jpg);
    display: inline-block;
    width: 500px;
    height: 50px;
}

@media (max-width: 420px) {
   .banner-1 {
        background-image: url(images/celular/banner1.jpg);
        width: 230px;
   }
   .banner-2 {
        background-image: url(images/celular/banner2.jpg);
        width: 100px;
        height: 10px;
   }
}
</style>

<div class="banner-1"></div>
<div class="banner-2"></div>

Adjust the @media (max-width: 420px) for what you find suitable for the screen of mobile phones, already the swf there would be no way to trade, but usually the swf itself can be exploited, so simply add it width: 100%; to adjust to the DIV element that receives the width: and height of media-query for example, however I must warn you that Google Chrome and Firefox already block files by default swf (I believe you can activate or still have the click to play, but it is something that will really only work depending on the user, flash is no longer a good way in time)

  • 1

    I’ll try it here, but I saw that you understood what I was looking for.

  • 1

    THANK YOU OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO !!

  • @jhonatansantos for nothing, and welcome to our community.

1

See if it fits, will detect if it is mobile and call a file and otherwise calls another file

function isMobile(){
    var a = navigator.userAgent||navigator.vendor||window.opera;
    if(/android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|ip(hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|mobile|o2|opera m(ob|in)i|palm( os)?|p(ixi|re)\/|plucker|pocket|psp|smartphone|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce; (iemobile|ppc)|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a))
        return true;    
    else
        return false;
}

if(isMobile()){
    document.write('<link rel="stylesheet" type="text/css" href="mobile.css" />');
}else{
    document.write('<link rel="stylesheet" type="text/css" href="desktop.css" />');
}

.In the document.write can put whatever you want, an image, called a css file, etc... or even an entire HTML. 

document.write('<img src="http://site/aaa.jpg">');

  • I will test and I warn you , but since I thank you for the help man

  • thanks guy worked out

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.