Tips for ensuring images are mobile-friendly in terms of screen size adaptation

I have implemented a carousel feature for my app by referring to the example provided at https://www.w3schools.com/bootstrap/bootstrap_carousel.asp. To ensure that the carousel displays the example images perfectly on a mobile screen without requiring users to scroll, I have taken images from a 5.7-inch mobile device, removed the notification bar, and adjusted the height and width of the images to match the screen size. However, I encountered difficulties in achieving this and tried various adjustments without success.

UPDATE: Following Metatron5's advice, I modified the code which resulted in successful display on Firefox for Android. Unfortunately, the Android webview does not recognize the vh and vw units as expected.

<!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Carousel</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
      <style>
    
    
      </style>
    </head>
    <body>
    
    
      
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
          <li data-target="#myCarousel" data-slide-to="3"></li>
        </ol>
    
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
          <div class="item active">
            <img src="begin.png" alt="" style="height: 100vh; width: 100vw;">
          </div>
    
          <div class="item">
            <img src="first.png" alt="" style="height: 100vh; width: 100vw;">
          </div>
        
          <div class="item">
            <img src="second.png" alt="" style="height: 100vh; width: 100vw;">
          </div>
    
          <div class="item">
            <img src="third.png" alt="" style="height: 100vh; width: 100vw;">
          </div>
        </div>
    
        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
    
    </body>
    </html>

androidhtmlcsswebviewcarousel

Answer №1

Upon reviewing the comments, it appears that the issue was due to cached data on the phone causing the style not to render properly. After clearing the cache, the issue was resolved. It is worth noting that the units vh and vw do not function correctly in Android Webview.

Answer №2

A few months ago, I encountered a similar issue with Google TV not supporting VH and VW. To resolve this, I utilized JavaScript. You can try integrating the following code into your script:

const sliderImages= document.querySelectorAll('carousel-inner .item');

window.onload = function (e) {
    sliderImages.forEach(sliderImage=> {
        sliderImage.style.height = `${this.innerHeight}px`;
        sliderImage.style.width = `${this.innerWidth}px`;
    });
}

window.onresize= function (e) {
    sliderImages.forEach(sliderImage=> {
        sliderImage.style.height = `${this.innerHeight}px`;
        sliderImage.style.width = `${this.innerWidth}px`;
    });
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are the benefits of using CSS to convert text to uppercase?

Today, I came across an intriguing observation. While browsing through code, I noticed that text was being transformed to uppercase using CSS instead of the common JavaScript method toUpperCase(). Surprisingly, this approach caused a test to fail. The test ...

javascripthtmlcss

Comparing the use of jQuery click event with the button to trigger a function that calculates the

Currently, I am grappling with a JQuery function that checks if any checkboxes are ticked within my form. My version of JQuery is v1.10.2. The code functions as expected when triggered by a button, but when I attempt to trigger it with a checkbox within t ...

javascriptjqueryhtmlformscheckbox

Interactive JavaScript button that navigates me to a document without the need to click

I'm facing an issue with my small project. I've been learning javascript and managed to create a script that calculates the square of a number provided by the user. var checkIt = function(){ var theNumber = Number(prompt("Please enter a number ...

javascriptjqueryhtml

CSS showcase of a minimalist image gallery

I have designed a simple image gallery using the following CSS: .product_container { width:100%; display:block; } .product_images { width:45%; display:inline-block; border:1px solid black; } .product_images .large { } .product_images ...

htmlcss

The malfunctioning Bootstrap navbar dropdown menu is causing a disruption in user experience by unexpectedly logging the user

I'm having an issue with the dropdown menu on my angular app. Every time I click on the Profile link to access the Account and Logout options, it automatically logs me out. <nav class="navbar navbar-expand-lg bg-dark navbar-fixed-top" ...

htmljquerycssangularbootstrap-4

Error: FileUriExposedException encountered while attempting to share a screenshot of a layout

Hello, I am encountering an issue when trying to share a screenshot of a layout. The sharing function works fine on versions earlier than Oreo, but on Oreo it is throwing a FileUriExposedException error. If anyone has insights on how to resolve this proble ...

javaandroidfileandroid-studiouri

Generate a list of files and transfer them to an input file

I am currently working on creating a drag and drop area where I can retrieve dataTransfer items using webkitGetAsEntry, and then differentiate between directories and files. My goal is to convert these files into a FileList and transfer them to a file inp ...

javascripthtmlgoogle-chromefileapi

Is there a way to automatically scroll vertically to a specific line in HTML?

Trying to explain this is a bit tricky. I am looking to add an element to the HTML that prompts the browser to scroll vertically to its location automatically when loaded, similar to an anchor. So: | visible area | | content html | | content html | ...

javascriptjqueryhtmlcss

Tips for getting free jqgrid to display frozen column borders in the search toolbar

If the actions column has a caption of "Activity" or custom settings and is frozen, the free jqgrid will not display column borders for this column in the search toolbar. Vertical lines do not appear in the search toolbar: Is there a way to resolve this ...

htmlcssjqgridfree-jqgrid

Delete all HTML functionalities

Is there a way to strip HTML functions when using a text area so that the content shows as plain text in a new post (div)? For example, if I type "Hello", I want it to appear as "< b > Hello < b / >", showing the whole code. Here is the code ...

javascriptjqueryhtml

The submit button click does not trigger the execution of ajax code

I'm faced with a challenge when trying to implement an ajax call in my form. My goal is to display a spinner on the screen to indicate that the form is processing and submitting information. However, it seems that the ajax call is not being triggered ...

jqueryhtmlajaxforms

How can you increase overall coverage in your JacocoReport task by including files from submodules in sourceDirectories and classDirectories?

Tool Versions gradle 5.6.4 java 1.8 jacoco toolVersion 0.8.2 Project Structure Overview ├── build.gradle ├── application │   ├── build.gradle (1) │   └── src ├── submodule_1 │   ├── build.gradle (2) │  ...

androidgradlejacoco-plugin

Adjusting the height of a card in Reactstrap

I am currently exploring Reactstrap and aiming to ensure a specific Card adjusts according to the size of the window by setting its aspect ratio using percentages rather than pixels. Interestingly, while adjusting the width works as desired, I'm faci ...

htmlcssreactjs

Empty space to the left of the vertical navigation bar

I'm struggling to get rid of the white space on the left side of my vertical navigation bar. I've attempted setting padding-left to 0 on my main navigation bar. This is my first time creating a navigation bar, so if you notice any semantic issu ...

csshtml

Elements styled as inline blocks with static dimensions, irregular in size

Is there a way to ensure that all three boxes are displayed at the same level? Currently, box 2 appears below box 1 and 3 due to having less content. I believe there must be some styling element missing to make each div display at an equal level regardless ...

htmlcss

Trouble with CSS positioning

Styling with CSS: .one { width: 13%; } .two { width: 30%; } .three { width: 30%; } Formatting in HTML: <table> <tr> <th class= "one">Quantity</th> <th class= "two">Info</th> ...

htmlcss

What is a better method for aligning an image in the middle of a floated container?

Is there a better way to center an image within a floated div without using an extra p tag? I currently have the image inside a p tag and center the p, but it annoys me having that extra tag. Any suggestions on how to center the image itself? Thanks! Below ...

htmlcsscss-floatcentering

Enhance the appearance of a row on the table with a lumin

Is there a way to create a glowing effect around a single row in a table, similar to the style shown in this example? Here's the code that can help achieve this effect, sourced from CSS/HTML: Create a glowing border around an Input Field .glowing-bo ...

javascriptjqueryhtmlcss

What are the steps to transfer an image captured by the camera to a class that specifically requires an image stored in the drawable folder?

Recently, I started using android studio and encountered an issue with passing an image taken from the phone camera (bitmap) to a class that requires an image from the drawable folder. My code works fine when passing an image like this: personList.add(0, ...

javaandroid

Troubleshooting: Datepicker not appearing in Bootstrap

Here is the detailed markup for the datepicker component: <div class="form-group row"> <div class="col-xs-3 col-md-offset-9"> <label class="control-label">Pick Date</label> <div class="input-group date" id="dp3" data-d ...

javascriptjqueryhtmlcsstwitter-bootstrap