I'm making my website responsive and have started development with the mobile half first.
Browsers render sizes so differently, especially mobile ones.. So all my font sizes aren't set, and the browsers set it themselves. It works great, even the default on an old blackberry.
Problem is, the content of list items within an unordered list doesn't resize.? They stay very small next to the perfectly adjusted text outside <ul>'s
I've tried using em as my measurement unit, and not only did this not work, it also defeats the point of me making my site dynamic to any browser; I don't want to set a size on anything, especially fonts.
So what can I do to make the font size adjust inside the lists?
In mobile broswer, you'd better set test-size-adjust to none,
body{-webkit-text-size-adjust:none;}
After reset test-size-adjust to none, then try to set other html tags' font-size.
<meta name="viewport" content="width=device-width, user-scalable=yes" />
I came across this tag on another question; it works perfectly.
Related
Given this markup:
ul {
width: 50vw;
}
<body>
<h1>the issue only happens when this header is quite long</h1>
<ul>
<li>it seems</li>
<li>that there need to</li>
<li>be quite a few</li>
<li>in this list</li>
<li>as well</li>
</ul>
<ul>
<li>
here is some more stuff, which also needs to be quite long for the issue
to occur
</li>
</ul>
</body>
When I view the page in chrome devtools with the device set to "iPhone SE", it looks like this:
but when I remove the "width: 50vw;" from the style tag, the fonts get bigger:
I wouldn't expect the width of the div to affect the font size at all. Why is this happening?
From Google responsive web design guide:
To attempt to provide the best experience, mobile browsers render the page at a desktop screen width (usually about 980px, though this varies across devices), and then try to make the content look better by increasing font sizes and scaling the content to fit the screen. This means that font sizes may appear inconsistent to users, who may have to double-tap or pinch-to-zoom in order to see and interact with the content.
In summary, it's just because how mobile browsers with small screens render web pages.
You can fix this issue by using viewport meta tag to make font-size consistent between different screen sizes.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
I also didn't see any reason to have this response. I ran the code you have, both as a codepen and just on my machine and the font remained a consistent size. Now, that's just for a regular webpage. I wasn't using the iPhone emulator.
My guess, then, is that changing the font size is a default quality with the iPhone you're testing for. That would make sense: make the font smaller on smaller screens.
I'd suggest trying a couple of different phone emulators on Chrome and I suspect you won't always have this issue. If this is for a specific project you're creating, making a media query to prevent the font getting smaller would be what I would do.
So I'm having an issue where my site has a lot of padding on the right side, making the layout load incorrectly. It appears correctly in on my desktop when the window is resized, but everything other than the header breaks when viewed on my phone. All of the relevant divs are set to a width of 480px, and I have the following tag in my header for the media query:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Here are screenshots of how it appears on desktop and mobile, as well as a link to my mobile css page (the menu is open on mobile, but the extra space seems to affect it as well).
CSS Page
Edit: I'm now having a slightly different issue, where the margin has been added to the entire right side of the screen. I changed the pixel widths for many of the divs to 100%, as well as adding the <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> tag to the header. While they can no longer zoom out, you can just scroll the screen horizontally to find the padding. I'm also having an issue with my font-face tag, which no longer loads the header fonts. I updated the css file, so hopefully that shows why it won't work anymore.
Also, here's a link to the live site: Link
You shouldn't be setting explicit widths here, (at least not in pixels anyway) and from a brief glance at what you've posted I'd imagine that's where your issue lies.
Firstly, take off the widths that you've set for anything that you intend on being "full width" - remember divs are block-level elements anyway, so if you don't set a width at all, they'll have a width of 100%.
Secondly, take off any other pixel widths you're setting and change them to be percentages instead.
Thirdly, you'll save yourself a lot of headaches if you set 'box-sizing' to 'border-box' (I'd recommend just doing it on '*' for simplicity). This will prevent your padding and margin from being added on top of any widths you set as percentages; they'll be included in the box sizing instead.
Finally, I can't stress enough how important it is to get out of the mindset of things like "mobile" and "desktop". All we're talking about here is different viewport sizes. :)
If you have a live link you can share I'd be more than happy to have a proper look at this.
Add the following to your .css file:
img{max-width:100% !important}
In my app I use Bootstrap and I set 2rem to my h2 element and 1.7rem to my h3 tag. Even if I adjust the browser width in my desktop (to the size of a mobile) the h1 is bigger than h3 which is what I want. But if I use the developer tools to switch to a mobile device view or view the site from my phone the h1 becomes smaller than the h3! What might be happening in here? It happened in multiple sites I created.
Example fiddle (Could not replicate the issue in the fiddle. But it's the code) : https://jsfiddle.net/gor87kg6/1/
The live site which have the issue : http://jayatours.lk/
Following the Bootstrap mobile first approach I noticed your website was not utilising the viewport meta.
Try adding the following to the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
Background Information:
Mobile browsers render pages in a virtual "window" (the viewport), usually wider than the screen, so they don't need to squeeze every page layout into a tiny window (which would break many non-mobile-optimized sites). Users can pan and zoom to see different areas of the page.
Viewport Information:
The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)
I believe this may be the cause of your issue as the use of rem seems to be correctly implemented. It might be more likely down to the dpi/ screen resolution of the mobile/ tablet device itself.
rem is a unit relative to the font size of the base (html) tag. The default in browsers is usually 16px if you haven't explicitly declared it. Perhaps the mobile browser has a smaller default?
Try setting the base font size before using rem units:
html { font-size: 16px; }
I don't see any issue. If you still see the issue then there could be 2 ways to resolve this:
1) See that the h1 font-size is not being set again in the media query
2) Check the base font applied to the html & whether it is being reset in the media query
I'm trying to optimise my website for mobiles and small screens. The website looks perfect on anything 1920x1080 and above. I'm using bootstrap and I can't figure out what's wrong with my code that is preventing the mobile scaling from working.
It seems my background 's arent scaling to the text - that is, these 's appear to be completely static and the text can just overflow past them and stack onto other parts of the page. What I want to happen is for the background colour, (white, grey, dark grey) to extend to the regions of the text on the mobile view.
Thank you in advance.
On every div you height and % (percentage). Take all those out and your site will be ok.
I also noticed the carousel is very slow at loading the pictures. If you compress each to about 200k or less it will load faster and still keep the resolution ok.
you have a <meta name="viewport" content="width=device-width, initial-scale=0.5">
i suggest making this to .8 or .9 or 1
the navbar menu does not adapt to mobile screens. Check the link below to see how a boostrap nav menu should be like and follow the example to create one
http://getbootstrap.com/examples/navbar/
Sections like these should have the same amount of text. So shorten the middle one out a bit, but make all sections equal to the amount of text and lines (example 3 lines or 4 lines of text) so they are responsive. A workaround will be to give a min-height to a section but i dont recomend doing that
Also the heading learning and problem solving is too long. You can change that to Learning
use the viewport meta tag, put it in your head
<meta name="viewport" content="width=device-width, initial-scale=1">
For font sizes, i prefer to use vh(viewport height) & vw(viewport width) to control sizes. That way the size will be proportional to the device view.
Be wary though. the viewport tag may cause rendering issues with height. For this, i use vh.
also, if the page is meant to fit to the screen, it may be a good idea to use "user-scalable=no" in your viewport tag. But only do that if you wish for end users to not zoom in & out.
I'm using the line
<meta name="viewport" content="width=device-width;">
but it doesn't seem to want to actually work in dolphin or the android stock browsers.
has anyone had this experience or is viewport just not compatible with those browsers?
EDIT: I am looking to set the browser to show 100% of the page, no zoom, just page. Setting the scale does the reverse of what I need and the users need to be able to zoom.
W3C recommends this:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
yes, I am aware, that it is from 2010 but I couldn't find a newer version
And it works for all androids I ever tested; also for dolphin. If you want to be really sure that even very outdated microsoft devices get it, you could also add:
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
At least it won't hurt to use all three, even though probably the last two will almost never be relevant.
EDIT: Turns out the opposite of what width=device-width does is requested. The thing is: Having zoomed out is the default behavior of every mobile browser, considering the content doesn't fit. Anything else would be counterproductive. I tried it with dolphin on various sites without any viewport-meta and it works as intended. So your content actually seems to fit, what means your documents width is indeed equal to or smaller than the device-width. That is for example the case, if you ...
... float crucial elements of your page contents
... fill your content via JavaScript (/Ajax) afterwards
... have crucial elements absolute positioned
... have negative margins on some crucial elements in your content
... have a dynamic page width, that scales to the windows width
Of course there are more possibilities. Unfortunately body { min-width: 800px; } (or whatever you want to be the min-width) is the only solution that comes to my mind, at the moment.
If your content has a static width, you could try
<meta name="viewport" content="width=980px" />
with 980px being your page width. But actually in that case, the documents width should be at least 980px anyway. So the viewport width should not be possible to achieve what you want.