I’ve been using display: none; on a site I’m designing now. So when I load the page on the mobile to see the progress, everything works fine. What I do is when css detects the device width of a mobile, it activate the display: none; of an element. But there’s something I don’t understand.
The first time the page loads (google chrome) on the smartphone (portrait mode), the element is hidden. When I rotate the screen(landscape mode), it’s still hidden. But when I rotate it again (portrait mode), there is when the element appears that is supposed to be hidden. Anyone can explain this?
Device: HTC One – Google Chrome browser
Solution: add this code to the header
<meta name="viewport" content="width=device-width, initial-scale=1.0">
And don't use #media (min-device-width) or (min-device-height), instead just make use of (min-width) or (min-height) and start from there. It will take a lot of headache when developing for mobile or tablets.
Related
I am developing this site: https://angharadportraits.com/
It displays OK on all devices on which I have tested it, and on Chrome emulations of different displays.
EXCEPT - the client uses a Lenovo Thinkpad T450, with a display 1366 x 768px. On Chrome the display appears scrunched up to about a quarter of the intended size. Using IE on the same machine it displays OK! See screendumps below
It is in Wordpress. Initially I based it on the twentyseventeen template but, because of the problem, I rebuilt it on twentythirteen with exactly the same result.
I'd be grateful for suggestions as to the cause and solutions
Display as intended Display on Thinkpad/Chrome
The client is zoomed out on their Chrome browser. (Notice the magnification glass at the right side of the URL address bar).
https://angharadportraits.com/how-it-works/
I checked this link and shrink the screen from my pc and inspect the code the css you have written cause and an issue check this link code where you have max-width issue. You added the child theme in that i see this css 131 line add like this
.entry-content {
width: 60%;
margin-left: 0;
max-width: 100%;
}
you can see layout like this https://www.awesomescreenshot.com/image/3137593/8d6459e40aec6c2a5f19a4f00d0b5379
Try to change your viewport settings to <meta name="viewport" content="width=device-width,height=device-height,minimum-scale=1,maximum-scale=1, , user-scalable=0"> The Lenovo Thinkpad T450 is probably scaling the page.
If you dont have a viewport tag yet you can add the code above between the <head> and </head> tag.
I'm working on a page template with a header at the top of the page. Nothing complex:
<div class="top-header">
text
</div>
.top-header {
width: 100%;
height: 50px;
}
In Chrome, that produces what I expected...a bar across the top 50px high and as wide a my viewport. Resizing my browser changes with width, but not the height, which is fixed at 50px.
However, using Chrome's Developer Tools, I realized that when viewing in responsive mode, the header resizes vertically. In essence, there's a level of full-page zoom going on.
What key concept am I missing here? I assume it might be a zoom property on the body. How to I ensure that my header is 50px on all devices?
Screen shots:
Top is using Chrome's responsive mode, bottom is simply resizing Chrome to the same width not using responsive mode.
You are probably missing the viewport meta tag, to control the layout on mobile browsers.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
From Apple's documentation:
Safari on iOS displays webpages at a scale that works for most web
content originally designed for the desktop. If these default settings
don’t work for your webpages, it is highly recommended that you change
the settings by configuring the viewport. You especially need to
configure the viewport if you are designing webpages specifically for
iOS. Configuring the viewport is easy—just add one line of HTML to
your webpage—but understanding how viewport properties affect the
presentation of your webpages on iOS is more complex. Before
configuring the viewport, you need a deeper understanding of what the
visible area and viewport are on iOS.
This other anwser does a very good job explaining why you need to specify it: Is the viewport meta tag really necessary?
I have a custom wordpress theme and I've been trying to debug this issue for days but can't figure it out. Would greatly appreciate your guys help!
On mobile devices - portrait view, the body isn't full width. On desktop browsers it works fine, even when you reduce the browser width to the same size as a mobile device.
Screenshot from my iphone -
Mobile screenshot
I already have this tag in the head -
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
My site - laxgoalierat.com
Edit: As you see the page initially loads on the mobile device with full width however then it adjusts to what is seen in the screenshot.
I've tried playing around with the body CSS. Making body position:fixed makes it expand the full width however then I cannot scroll up and down :(
I'm out of other ideas. Let me know if providing any other details would help.
Thanks in advance, Damon
Your offending HTML seems to be coming from elements similar to this:
<div class="yui-skin-sam avpcw_container">...</div>
I don't know what these are or what they do... But they are the reason for the effects you are seeing.
So a quick and dirty approach would be to apply css to hide either or both of these classes to patch over your problem. For example:
.yui-skin-sam {
display: none;
}
Obviously you need to be sure that hiding these classes is appropriate. I had a quick look to try to work out what they are used for; but didn't get anywhere.
i have created a responsive page with bootstrap 3. I am having a problem in all mobile devices, there is long scroll bar coming. Strange thing is it is coming fine in my local machine. Issue is only reproducible in production environment. I have tried every thing but nothing worked.
Using meta tag: <meta name="viewport" content="width=device-width, initial-scale=1">
This issue is making me insane, i am not getting the cause of this issue.
Below is the page url
http://beta.proptiger-ws.com/careers
Even if i remove the entire body tag in consle panel the scroll bar still comes. Let me know if you guys need any other detail.
I am updating this question my new finding are this page is not becoming responsive thats why the scrollbar is coming. dont know what is wrong with the viewport meta as same page working fine on my local machine.
That site is not responsive if you have set widths
Search for the class below and change.
#media (-webkit-min-device-pixel-ratio: 1) and (max-width: 768px)
.mainContainer, .footer-container, .footer-cont-info, .copy-container, .searchFilter {
width: 100%;
}
Be sure to do a hard refresh when editing in external css files (ctrl + F5)
Check the css for min-width.
If there is any element with min-width greater than the page then it would produce a scrollbar.
I'm using Zurb Foundation and am getting a strange bug on the iPad. The defect occurs when I start in landscape view, focus on a text input, and then rotate the device from landscape to portrait.
The viewport is set to:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
When I view the DOM in web inspector, the glitch area to the right is not represented at all. I've tried to put an overflow-x: hidden; on the html and body elements, but still no luck. I'm not sure if it's a me issue, Zurb issue, or iPad issue. Any advice would be greatly appreciated.
Try adding this CSS to the containing form:
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
If that doesn't do it, try moving those rules to the form's parent, etc.
This fixed a similar issue I had relating to bits of form fields not being redrawn correctly. Hacky workarounds like this make me love webdev so so much!
I just had the same issue. It's a bug with iPad's (maybe all of iOS) that when the page is smaller than the window/viewport and you have the keyboard open while rotating... it doesn't know how to handle it. Haha.
Here's how I fixed mine with jQuery
jQuery(function($) {
var iPad = navigator.userAgent.toLowerCase().indexOf("ipad");
if(iPad > -1) {
$('body').css({'min-height':($(window).height())});
}
Fixed it on mine. No more weird black box or broken looking page. Let me know how it goes for you!