bootstrap page loads then “jumps up” into place on android

When testing the page works fine in chrome on desktop and iphone…
But when testing on android mobile:
the page loads low down, then “jumps up into place” only once you tap the screen or start scrolling.
I’ve tried:
Adjusting height elements, using svh, dh etc.
reordering bootstrap/jquery so it comes at the start (in head) / end (before close of body).
Still no difference.
I can’t get the page to load properly on android without the “jump up” of content
The top part of the page is like a landing page and occupies 100svh, and content should be centered.
Any ideas?
(I created a simplified test page below, removing a lot of content and combined the css into the same page to help investigate)
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Meta tags -->
  <title>TEST PAGE NEW YORK</title>


  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
 <!-- Basura Styles -->

  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" /> <!--fade in containers on scroll-->

  <style>
  @font-face {
    font-family: 'nimbus-regular';
    src: url(/fonts/NimbusRomNo9L-Reg-webfont.woff);
    font-weight: normal;
    font-style: normal;

}
@font-face {
  font-family: 'nimbus-medium';
  src: url(/fonts/NimbusRomNo9L-Med-webfont.woff);
  font-weight: normal;
  font-style: normal;

}
@font-face {
  font-family: 'nimbus-regular-italic';
  src: url(/fonts/NimbusRomNo9L-RegIta-webfont.woff);
  font-weight: normal;
  font-style: normal;

}
@font-face {
  font-family: 'nimbus-regular-italic';
  src: url(/fonts/NimbusRomNo9L-MedIta-webfont.woff);
  font-weight: normal;
  font-style: normal;
}

body {
  background-color: silver;
padding: 0px;
font-family: 'nimbus-regular';
  font-size: 1rem;
  line-height: 1.2;
  box-sizing: border-box;
  margin: 0;
  overflow-x: hidden;
 }
 b {
  font-family: 'nimbus-medium';
  font-weight: normal;
  font-style: normal;
}
i {
  font-family: 'nimbus-regular-italic';
  font-weight: normal;
  font-style: normal;
}
/* Link styles */
a {
  color: blue; /* Set link color to blue */
  text-decoration: none; /* Remove default underline */
}
/* Hover and active link styles */
a:hover,
a:active,
a:focus {
  text-decoration: underline; /* Underline link on hover, click, or focus */
}


/* Headers elements */
.header-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100svh; /* 100% of viewport height */
  background-image: linear-gradient(to bottom, 
  green 0%, 
  lightgreen 95%, 
  #f5f5f5  100%);
}
.header-block {
  text-align: center;
  margin: 0 auto;
  padding-top: 0px;
  background-color: ;
  
}
.header-block img {
  width: 45%; /* Scale logo to X% of browser width */
  max-width: 250px; /* Max width image */
}
.header-text {
  font-size: min(6vw, 46px); /
  line-height: 1.2;
  margin-right: 40px;
  margin-left: 40px;
  padding-top: 40px;
  max-width: 800px;
  background-color: ;
}
  .header-emailtext {
    margin-top: 20px; /* Adjust the top margin as desired */
    font-size: min(5vw, 2rem); /* Responsive font size up to a maximum of 44px */
  }


.selected-work {
  margin: 0px;
  overflow-x: hidden;
}
.container {
  background-color:;
  margin-top: 0px; /* Add margin-top for spacing */
  margin-bottom: 0px;
  padding: 15px;
  padding-bottom: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* Change flex direction to column */
  position: relative; /* Add position relative */
  box-sizing: border-box; 
}
.container-social {
  margin: auto;
  background-color:;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* Change flex direction to column */
  position: relative; /* Add position relative */
}


.slideshow-container {
  position: relative;
  width: 100%;
  padding: 0px;
  margin: auto;
  overflow: hidden;
  background-color: ;
  display: flex; /* Use flexbox layout */
  justify-content: center; /* Center items horizontally */
  align-items: center; /* Center items vertically */
}
.slideshow-container img,
.slideshow-container iframe {
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}

/* image loading placeholder */
.image-placeholder {
  width: 100%;
  height: 100%;
  background-color: #e9ecef;
  background-image: linear-gradient(90deg, #e9ecef 0%, #f8f9fa 50%, #e9ecef 100%);
  background-size: 200% 100%;
  animation: wave 2s infinite linear;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
}
@keyframes wave {
  0% {
      background-position: 0 0;
  }
  100% {
      background-position: -200% 0;
  }
}

.carousel-item {
  text-align: center; /* Center images horizontally */
}
  /* CSS for controlling the fade transition speed specific to carousels */
  #myCarousel1 .carousel-item,
  #myCarousel2 .carousel-item,
#myCarousel3 .carousel-item {
    transition-property: opacity;
    transition-duration: 0.42s; /* Adjust the duration as needed */
  }
/* Positioning for navigation arrows */
.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  padding: 10px;
  background: transparent;
  border: none;
  outline: none;
  display: none; /* Initially hide the arrows */
}
.carousel-control-prev {
  left: 0;
}

.carousel-control-next {
  right: 0;
}
/* Global CSS class for carousel navigation arrow images */
.carousel-arrow-img {
  width: 8vw;
  max-width: 100px;
  min-width: 58px;
}
/* Custom CSS for text boxes */
.textbox {
  background-color: white;
  max-width: 600px;
  min-width: 600px;
  padding: 20px;
  margin-top: 20px; /* Add margin-top for spacing */
  margin-left: auto; /* Align to the right */
  margin-bottom: 0px; /* Add margin-bottom for spacing */
  text-align: left; /* Align text to the left */
  font-size: 1.1rem;
  line-height: 1.3;
}

@media (min-width: 768px) {
  /* Adjust this value based on when you want to apply these styles */

  .c-gap {
    margin-left: 12%; /* 8% from the left */
    width: calc(88% - 5px); /* Calculate width dynamically */
  }
  .c-cookbook {
    margin-right: 10%; /* 8% from the left */
    width: calc(90% - 5px); /* Calculate width dynamically */
  }
  .c-naps {
    margin-left: 15%; /* 8% from the left */
    width: calc(75% - 5px); /* Calculate width dynamically */
  }
  .c-secondhand {
    margin-right: 15%; /* 8% from the left */
    width: calc(85% - 5px); /* Calculate width dynamically */
  }
  .c-wil3d {
    margin-left: 12%; /* 8% from the left */
    width: calc(88% - 5px); /* Calculate width dynamically */
  }
  .c-chase {
    margin-left: 20%; /* 8% from the left */
    width: calc(80% - 5px); /* Calculate width dynamically */
  }

}



@media (max-width: 600px) {
  
  .container {
    padding-bottom: 100px;
    padding-left: 15px;
    padding-right: 15px;
  }
  /* remove padding around iframe videos so play full width */
  iframe#phonebook-vid,
  iframe#everythingisfine-vid {
    padding: 0 !important;
  }
    .carousel-control-prev,
    .carousel-control-next {
      display: block !important; /* Show arrows always and override hover behavior */
      opacity: 1 !important;;
    }
    .navigationx {
      font-size: 24px !important;
      padding: 16px !important; 
      text-align: center !important; /* Center text horizontally */
      background-color: white;
      border-top: 2px solid blue; /* Add a 1px solid blue border along the top */
      opacity: 0; /* Initially hidden */
      transition: opacity 0.3s; /* Smooth transition */
    }
    .navigationx.visible {
      opacity: 0.93; /* Visible when .visible class is added */
    }
    .textnx {
      margin-right: 18px; /* Adjust the right margin to create space */
  }
  /* To prevent extra spacing after the last element */
  .textnx:last-child {
      margin-right: 0; /* Remove margin on the last element */
  }
  .textbox {
    background-color: transparent;
    min-width: 100%;
    font-size: 18.5px;
    line-height: 1.2;
    padding: 0px;
  }
  .header-text {
    font-size: 34px !important;
    line-height: 1.1 !important;
}
.basura-text-title {
  font-size: 28px !important;
  line-height: 1.3 !important;
}


.basura-text-xl {
  font-size: 32px !important;
  line-height: 1.2 !important;
}
.basura-text-l {
  font-size: 30px !important;
  line-height: 1.3 !important;
}
.basura-text-ml2{
  font-size: 28px !important;
  line-height: 1.4 !important;
}
.basura-text-ml{
  font-size: 26px !important;
  line-height: 1.4 !important;
}
.basura-text-mm{
  font-size: 21px !important;
  line-height: 1.2 !important;
}
.basura-text-m{
  font-size: 18px !important;
  line-height: 1.4 !important;
}
.basura-text-s{
  font-size: 16px !important;
  line-height: 1.3 !important;
}

.press-section {
  display: none; /* Hide the press section on screens below 600px */
}
}



@media (max-width: 599px) {
  .navigation {
    display: none; /* Hide navigation at screen sizes below 600px */
  }
}
@media (min-width: 600px) {
.navigationx {
  display: none; /* Hide the navigationx element on screens wider than 600px */
}
.press-marquee {
  display: none; /* Hide the press section on screens below 600px */
}
}


.pill {
  background-color: blue;
  border: none;
  color: white;
  padding: 3px 7px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 4px 0px 0px;
  border-radius: 7px;
  cursor: none;
  font-family: 'nimbus-regular';
  font-size: 14px;
}

/* General Navigation */

.navigation {
  font-size: 24px;
  position: fixed;
  top: 20px;
  right: 30px;
  z-index: 1000;
  opacity: 0; /* Initially hidden */
  transition: opacity 0.3s; /* Smooth transition */
}
.navigation.visible {
  opacity: 1; /* Visible when .visible class is added */
}
.navigation a {
  color: blue;
  text-decoration: none;
  margin-left: 9px;
}

.navigation a:hover {
  text-decoration: underline;
}


  


  /* Lower container */
.lower-container {
  align-items: center;
  margin-bottom: 0px;
  background-image: linear-gradient(to top, 
  #silver 0%, 
  #silver 95%, 
  #f5f5f5  100%);
  
}
  .basura-footer {
    font-size: .95rem;
    color: silver;
    padding-bottom: 20px;
    margin: 0 auto;
    text-align: center;
    background-color:;
  }


  
  /* about page specific */  /* about page specific */  /* about page specific */

  body#about{background-color:#f9dcda;}


  
  /* Headers elements */
.about-header-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 70px;
}
.about-header-block {
  text-align: center;
  margin: 0 auto;
  padding-top: 0px;
  background-color: ;
  
}
.about-header-block img {
  width: 38vw; /* Scale logo to X% of browser width */
  max-width: 200px; /* Max width image */
}
.about-header-text {
  font-size: min(6vw, 2.8rem); /* Responsive font size up to a max */
  line-height: 1.2;
  margin-right: 40px;
  margin-left: 40px;
  max-width: 800px;
  background-color: ;
}

.container-about {
  background-color:;
    margin: 0 auto; /* Center the container horizontally */
    padding: 15px;
    margin-bottom: 0px;
    font-size: 1.5rem;
    line-height: 1.5;
     box-sizing: border-box;
}

.basura-container {
  max-width: 800px;
  margin: 0 auto;
  box-sizing: border-box;
  margin-bottom: 40px;
}
.about-hr {
  margin-top: 60px;
  margin-bottom: 40px;
   box-sizing: border-box;
}

.basura-button { /* the headline text in the about page accordions */
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding-right: 80px; /* Adjusted padding */
  padding-left: 20px; /* Adjusted padding */
  padding-top: 20px; /* Adjusted padding */
  padding-bottom: 20px; /* Adjusted padding */
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  transition: border-bottom-color 0.3s ease; /* Transition border-bottom color on click */
  font-family: "Times New Roman", Times, serif;
  font-size: 24px;
  box-sizing: border-box;
}

/* Button hover and active styles */
.basura-button:hover,
.basura-button:focus {
  background-color: transparent;
}

/* Toggle button active state with different border color */
.basura-button.active {
  border-bottom-color: #333;
  transition: border-bottom-color 0.3s ease; /* Transition border-bottom color on click */
  background-color:; /* Yellow background color when active */
}

/* Hide accordion content by default */
.basura-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease; /* Transition max-height for accordion animation */
  margin: 0; /* Adjust margin around the text */
  border-bottom: 1px solid #333; /* Divider line at the bottom of accordion content */
}

/* Padding for text areas within accordion content */
.text-area {
  font-size: 20px;
  padding-top: 10px;
  padding-left: 20px;
padding-bottom: 40px;
  line-height: 1.4;
  width: 80%; 
  max-width: calc(100% - 40px); /* Calculate max-width to accommodate padding */
  box-sizing: border-box;
}

/* Faded-in background and text color for active accordion */
.basura-accordion-content.active {
  background-color: ; /* White background color for active accordion */
}

.basura-accordion-content.active .text-area {
  background-color: ; /* White background color for text area in active accordion */
}


/* Unified text sizes */

.basura-text-title {
  font-size: 32px;
  line-height: 1.3;
}
.basura-text-xl {
  font-size: 32px;
  line-height: 1.3;
}
.basura-text-l {
  font-size: 30px;
  line-height: 1.3;
}
.basura-text-ml2{
  font-size: 28px;
  line-height: 1.4;
}
.basura-text-ml{
  font-size: 24px;
  line-height: 1.4;
}
.basura-text-mm{
  font-size: 21px;
  line-height: 1.3;
}
.basura-text-m{
  font-size: 20px;
  line-height: 1.4;
}
.basura-text-s{
  font-size: 18px;
  line-height: 1.3;
}


/* Lower page social buttons */
a .btn.btn-custom {
  background-color: whitesmoke; /* Default background color */
  color: blue; /* Default text color */
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition effect */
  border: none;

}

a .btn.btn-custom:hover,
a .btn.btn-custom:focus {
  background-color: blue; /* New background color on hover and focus */
  color: whitesmoke; /* New text color on hover and focus */
  border: none;
}

a .btn.btn-custom:active {
  background-color: blue; /* Background color when button is clicked */
  color: white; /* Text color when button is clicked */
  border: none;

}

/* Reset to default styles when button is released */
a .btn.btn-custom:focus:not(:active) {
  background-color: whitesmoke; /* Default background color on focus release */
  color: blue; /* Default text color on focus release */
  border: none;
}

/* Ensure hover state works after button is clicked */
a .btn.btn-custom:not(:active):hover {
  background-color: blue; /* New background color on hover (restore) */
  color: whitesmoke; /* New text color on hover (restore) */
  border: none;
}

 

</style>

</head>


<body>
  <!-- Header Block starts-->
  <div class="header-container">
    <div class="header-block">
      <div data-aos="fade-in">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/LEGO_logo.svg/1024px-LEGO_logo.svg.png" alt="Test New York" />
      </div>
      <div data-aos="fade-in">
      <div class="header-text">
        Key intro headline should be centered, not jump up into place on android.
      </div>
      </div>
      <!--
      <div class="header-emailtext">
      <a href="mailto:[email protected]">[email protected]</a>
      </div>-->

    </div>
  </div>
  <!-- Header Block ends-->

  <!-- Setting Selected work bg colour-->
  <div class="selected-work" style="background-color:whitesmoke;">
    <!-- Setting Selected work bg colour-->

    this is where the content would go.
    <br><br>
    lorem ipsum




    <!-- Setting Selected work bg colour-->
  </div>


  <!-- lower container -->
  <div class="lower-container" style=" width: 100%; box-sizing: border-box; padding: 0px; margin: 0px;">

    <!-- lower container -->

    
<div data-aos="fade-in">
  <div class="container-social basura-text-m" style="max-width: 980px; padding-top: 120px; padding-bottom: 60px; background-color:;">

    <div class="row" style="width: 100%;">

      <!-- First column (3 columns on medium and larger screens) -->
      <div class="col-md-4 mb-2">
          <div style="background-color:; height: 100%; text-align: center;padding: 0px;">
            <div class="d-grid">
              <a href="http://www.instagram.com/test" target="_blank"><button type="button" class="btn btn-lg basura-text-mm btn-custom" style="width: 100%;"> @testhandle</button></a>
            </div>
          </div>
      </div>

      <!-- Second column (3 columns on medium and larger screens) -->
      <div class="col-md-4 mb-2">
        <div class="d-grid">
          <a href="about.html"><button type="button" class="btn btn-lg basura-text-mm btn-custom" style="width: 100%;"> About Test</button></a>
        </div>
          </div>


     <!-- Third column (3 columns on medium and larger screens) -->
      <div class="col-md-4 mb-2">
        <div class="d-grid">
          <a href="mailto:[email protected]" target="_blank"><button type="button" class="btn btn-lg basura-text-mm btn-custom" style="width: 100%;">[email protected]</button></a>
        </div>
          </div>

  </div>
</div>
</div>



    <div class="basura-footer">All contents © XXX Test co</div>

    <!-- lower container -->
  </div>
  <!-- lower container -->



      <!-- jQuery -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>


  <!-- navigation wide -->
  <div class="navigation" id="navigation">
    <span class="textn1"><a href="index.html"> Work</a></span>
    <span class="textn1"><a href="about.html">About</a></span>
  </div>

  <!-- navigation mobile -->
  <div class="navigationx sticky-bottom" id="navigationx">
    <span class="textnx"><a href="index.html">Work</a></span>
    <span class="textnx"><a href="about.html">About</a></span>
  </div>
  <!-- navigation end-->

  <script>
    // placeholder bg images. Function to show image and hide placeholder
    function showImage(img) {
      img.previousElementSibling.style.display = 'none'; // Hide the placeholder
      img.style.display = 'block'; // Show the image
    }
  </script>


  <!-- JavaScript section -->
  <script>
    // Function to update caption text for a specific carousel
    function updateCaption(carouselId, textboxId, slideIndex) {
      let caption = "";
      switch (carouselId) {
        case "myCarousel2":
          // Text for carousel 2
          switch (slideIndex) {
            case 0:
            caption = `test caption`;
              break;
            case 1:
            caption = `test caption`;
              break;
            case 2:
            caption = `test caption`;
              break;
            case 3:
            caption = `test caption`;
              break;

            case 4:
            caption = `test caption`;
              break;
            case 5:
            caption = `test caption`;
              break;
            case 6:
            caption = `test caption`;
              break;
            // Add more cases for additional slides if needed
          }
          break;
        case "myCarousel3":
          // Text for carousel 3
          switch (slideIndex) {
            case 0:
            caption = `test caption`;
              break;
            case 1:
              caption = `test caption`;
            // Add more cases for additional slides if needed
          }
          break;
      }
      $("#" + textboxId).html(caption);
    }

    $(document).ready(function () {

      // Initialize carousel 2
      initializeCarousel("myCarousel2", "captionText2");

      // Initialize carousel 3
      initializeCarousel("myCarousel3", "captionText3");


      // Event handler for clicking on navigation buttons
      $(".carousel-control-prev, .carousel-control-next").on("click", function () {
        // Get the carousel ID and textbox ID
        const carouselId = $(this).attr("data-bs-target").slice(1); // Remove '#' from the ID
        const textboxId = "captionText" + carouselId.slice(-1);

        // Get the index of the active slide
        const activeSlideIndex = $("#" + carouselId).find(".carousel-item.active").index();

        // Update the caption immediately when the navigation buttons are clicked
        updateCaption(carouselId, textboxId, activeSlideIndex);
      });

      // Event handler for slide change
      $(".carousel").on("slid.bs.carousel", function () {
        // Get the carousel ID and textbox ID
        const carouselId = $(this).attr("id");
        const textboxId = "captionText" + carouselId.slice(-1);

        // Get the index of the active slide
        const activeSlideIndex = $(this).find(".carousel-item.active").index();

        // Update the caption immediately when the slide changes
        updateCaption(carouselId, textboxId, activeSlideIndex);
      });
    });

    // Function to initialize each carousel
    function initializeCarousel(carouselId, textboxId) {
      // Trigger updateCaption function for each carousel on page load
      const activeSlideIndex = $("#" + carouselId).find(".carousel-item.active").index();
      updateCaption(carouselId, textboxId, activeSlideIndex); // Show initial caption for first carousel
    }

  </script>



  <!-- nav arrows on hover -->
  <script>
    $(document).ready(function () {
      // Get all slideshow containers
      const slideshowContainers = $(".slideshow-container");

      // Get all navigation arrows
      const prevArrows = $(".carousel-control-prev");
      const nextArrows = $(".carousel-control-next");

      // Show/hide navigation arrows when mouse enters/leaves carousel area
      slideshowContainers
        .on("mouseenter", function () {
          $(this)
            .find(prevArrows)
            .add($(this).find(nextArrows))
            .css("display", "block");
        })
        .on("mouseleave", function () {
          $(this)
            .find(prevArrows)
            .add($(this).find(nextArrows))
            .css("display", "none");
        })
        .on("mouseover", function () {
          $(this)
            .find(prevArrows)
            .add($(this).find(nextArrows))
            .css("opacity", "1");
        })
        .on("mouseout", function () {
          $(this)
            .find(prevArrows)
            .add($(this).find(nextArrows))
            .css("opacity", "1");
        });

      // Click event for navigation buttons
      $(".carousel-control-prev, .carousel-control-next").on(
        "click",
        function () {
          // Pause any playing videos
          const playingVideo = $(this)
            .closest(".carousel")
            .find(".carousel-item.active")
            .find("iframe")[0];
          if (
            playingVideo &&
            playingVideo.tagName.toLowerCase() === "iframe"
          ) {
            playingVideo.contentWindow.postMessage('{"method":"pause"}', "*");
          }
        }
      );
    });
  </script>

  <!-- nav arrows on hover -->

  <!-- script for random button colors -->
  <script>
    // Function to generate a random color
    function getRandomColor() {
      var letters = "0123456789ABCDEF";
      var color = "#";
      for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }
    // Function to change the color of all pill buttons
    function changeColor() {
      var pills = document.querySelectorAll(".pill");
      pills.forEach(function (pill) {
        pill.style.backgroundColor = getRandomColor();
      });
    }
    // Change the color every second
    setInterval(changeColor, 500);
  </script>
  <!-- script for random button colors -->

  <!-- navigation bottom transition in/out -->
  <script>
    window.addEventListener("scroll", function () {
      var navigationx = document.getElementById("navigationx");
      if (window.scrollY > 0) { // Adjust scroll position as needed
        navigationx.classList.add("visible");
      } else {
        navigationx.classList.remove("visible");
      }
    });
  </script>
  <!-- navigation transition in/out -->

  <!-- navigation top transition in/out -->
  <script>
    window.addEventListener("scroll", function () {
      var navigation = document.getElementById("navigation");
      if (window.scrollY > 0) { // Adjust scroll position as needed
        navigation.classList.add("visible");
      } else {
        navigation.classList.remove("visible");
      }
    });
  </script>
  <!-- navigation transition in/out -->

  <!-- containers, fade in on scroll -->
  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>


</body>

</html>
Filed under: Kiến thức lập trình - @ 22:00
Thẻ: javascriptandroidcssjquery-mobilebootstrap-5
Thiết kế website giá rẻ

Danh mục

bootstrap page loads then “jumps up” into place on android
