Issues with fixed header, footer and side bar on ipad / iphone

大城市里の小女人 提交于 2019-12-10 21:19:46

问题


I'm in the process of developing a new website for a local club.

I've created the main webpage and have a fixed header, footer and side bar, the content is in a scrolling element. The page looks perfect on my MacBook and in various browsers. When I look at the page on my iPhone or iPad the page looks as it should until I zoom the page and then the fixed side bar is no longer fixed.

If anyone has any clues as to what I'm doing wrong I'd be very grateful as this is driving me mad.

The test page can be viewed at http://tawvelo.org/new/home.html.

I've attached a couple of photos which will hopefully show the issue.


回答1:


position: fixed is known not to play well on iOS - http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/

How to fix it? Easy. Search StackOverflow. This question has been asked previously:

  1. CSS “position: fixed;” into iPad/iPhone?
  2. Fixed positioning in Mobile Safari


来源:https://stackoverflow.com/questions/15254095/issues-with-fixed-header-footer-and-side-bar-on-ipad-iphone

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!