Issue with dragging and styling windows in Safari on iOS

When checking my website on Safari using an iPad or iPhone, I noticed that I can touch and drag left to right, causing the entire window to move and reveal the grey background behind it. Here is a link to my page.

However, when visiting other websites, nothing happens when I try to touch and drag left to right. An example of this can be seen by following this link: here.

I'm curious how these sites prevent dragging. On my own page, after dragging the window to the left, there is a white space visible at the edge of the green background at the top. How can I remove this? Shouldn't the div cover the entire width of the screen?

htmlcssios

Answer №1

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

Here you have it! You'll need to ensure your design is compatible with that specific zoom level. Experimenting with scales can lead to unique outcomes. Best of luck with designing for iOS web!

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

CSS prefers to remain within its original controller and does not want to be uploaded from any other source

My webpage includes headers and footers with CSS in them. Strangely, when I load the view using one controller, the CSS displays correctly. But when I try to load the same view using a different controller, the CSS doesn't appear at all. What could b ...

phpcsscodeigniterframeworks

Unique solution: "Using CSS to ensure the overflow document always scrolls to the bottom

Is there a way in CSS to make a div with overflow: scroll always automatically scroll to the bottom along the Y-axis, regardless of its content? For example, like a chat thread that consistently displays the latest message at the bottom. I've encount ...

css

Apple's iPhone does not adhere to media query specifications

My responsive website was functioning perfectly on desktop, Android, and Windows Phone devices. However, when I asked my friends to check it on their iPhones running iOS 10, they informed me that the media queries were being ignored on iPhone models 5, 5s, ...

ioscssiphoneresponsive-designmedia-queries

Tips for organizing JSON data in AngularJS are as follows:

Can someone assist me in looping this array value into 3 columns using angularjs? Currently, my view appears as an HTML table with 3 columns, but the values are displayed vertically instead of horizontally. You can see an example of how it looks here. Bel ...

htmlangularjsjsonangularjs-ng-repeat

Columns in Bootstrap compressed

Seeking advice regarding setting up a recruitment portal for my employer. Having trouble with the bootstrap scaffolding - columns appear squashed on smaller devices despite using xs columns. Looking for guidance to make it more responsive. Would greatly a ...

htmlcsstwitter-bootstrap

How can I apply a border to individual table cells in HTML without affecting the entire table?

Struggling to apply a border on table cells, especially when using rowspan. Desiring a table layout with 4 cells - one large cell on the left and three smaller cells on the right side of it. Below is the code snippet I attempted: jsfiddle[dot]net/1fv4dz ...

htmlcsshtml-table

Sending jQuery variables to PHP

Is it possible to transfer a jQuery variable to a php file? Let's take a look at the code in my_js.js: function updates() { $.getJSON("php/fetch.php", function(data) { $.each(data.result, function(){ var s_id = this[& ...

phpjqueryhtml

Steps to activate a single button within a deactivated fieldset

Is there a way to deactivate all elements within a Fieldset, while keeping certain buttons active? Check out this demo. <fieldset ng-disabled="true"> <legend>Personalia:</legend> Name: <input type="text"><br> Em ...

javascripthtmlangularjs

Tips for wrapping a div element around another div at the top left corner

I am working with a particular layout. <div class="comment"> <div class="leftpart"> </div> <div class="rightpart"> </div> </div> When viewing on a desktop, I maintain the original styling where each div is in its own s ...

htmlcss

Align the last line of flex cells to the left side

I have created a flex structure that resembles a table and adjusts the number of cells based on the content. However, when the last row is not full, the remaining cells stretch to fill the empty space, which affects the overall appearance of the structure. ...

cssflexbox

Master the art of filtering rows in an HTML table based on a select option when the mouse is clicked

I am trying to create a table that displays only the rows selected in a dropdown menu. Here is an example: If "All" is selected, the table should display all rows. If "2017" is selected, the table should display only the rows that have "2017" in the sec ...

javascriptjqueryhtml

Combining Various Template Variables into a Single Variable in Django

I am facing a challenge in assigning multiple values from a dictionary to a variable within a Django template. For example: fruit.supplier = tesco fruit.color = blue {% with test=fruit.supplier_fruit.color %} {{ test }} {% endwith %} The expected ...

htmldjango

Tap to navigate to queued sections on click

Greetings, community members! Despite my extensive research, I have been unable to find a solution to my query. Just a heads up - I am a novice when it comes to javascript and jQuery. My question pertains to incorporating two image buttons that, upon cli ...

javascriptjqueryhtmlcssscroll

Unable to retrieve the parent element using jQuery

I am facing an issue with my html structure that is generated dynamically through a foreach loop. I have attempted to remove the entire <a> element by accessing it from its ACTIVE HYPERLINK. However, all my efforts seem to be in vain as I am unable t ...

javascriptjqueryhtmlcss

When the search is focused, I prefer for the expanding search box to overlay the menu section rather than pushing it aside, all without the use

I am working on a search box with a subtle animation: <input class="search" type="search" placeholder="Search"> To make it expand when focused, I used the following CSS: .search:focus { width: 225px; outline: none; } I also experimented w ...

htmlcsssearch

Exploring the capabilities of rowGroup within DataTables

Currently, in the process of completing a project, I am retrieving data from a REST API to populate my DataTable. To avoid displaying duplicate items, I am interested in creating subrows in the DataTable with a drop-down menu based on an item in the "Deliv ...

javascripthtmljqueryajaxdatatables

I tried moving the onchange(this) function from HTML to JavaScript, but I seem to have missed a parameter. The code ends

I'm currently building a website for a fictional ice cream shop to enhance my JavaScript skills. function hideAAndB() { var pickupDiv = document.getElementById("pickupDiv"); var deliveryDiv = document.getElementById("deliveryDiv"); pickupDi ...

javascripthtmldomparameters

Troubleshooting Owl Carousel's width problems upon initial loading

Currently, I am utilizing the Owl Carousel and have the following script: $("#owl-demo").owlCarousel({ items : 3 }); My intention is for the container to display 3 images. However, upon initial load, this is what appears: Oddly enough, when I resize ...

jquerycsscarouselowl-carousel

Aligning the Bootstrap 5 Accordion Button in the Center and Adding Line Breaks

I have a few queries regarding the code I am implementing using Bootstrap 5. JSFiddle How can I center align the header within the button? <button class="accordion-button collapsed text-center" type="button" data-bs-toggle=" ...

htmlcsstwitter-bootstrap

Do designers often manually adjust elements using media queries when working with Bootstrap?

Is it common practice to directly invoke media queries in order to manually adjust the layout of elements when using Bootstrap? In other words, if I have a custom element that I need to display or position in a specific way, is it acceptable to call the m ...

htmlcsstwitter-bootstrapmedia-queries