I created a map in Mapbox studio and added it to my website. When viewed on desktop, the size of the icon points on the map are great. When I view on mobile, they're a bit too large. Is there a way to size the icons differently when viewing a map on mobile?
Mapbox-GL-JS doesn't itself provide support for desktop vs mobile. However:
If you're using Markers, you can give them responsive styling like anything else. For instance:
#media screen and (max-width: 750px){
.mapboxgl-marker {
width: 20px;
}
}
If you're using symbol layers, you would need to detect when the window size changes, and use that to set an appropriate icon-size.
Related
I have a really simple portfolio site (sample page: http://stevebishop.org/images/a_working_title/index.html) and I've made a responsive design that loads a 'mobile' style sheet that loads instead for the iPhone sized screen.
The only css really in the code for either is on regular style sheet the images are scaled 100% height of the screen and for the mobile they are 100% width. The intention being to have the largest possible image for each device with an image fitting on the screen all at once.
This all works fine, except the problem is with viewing on iPads - as they should act like desktops and load the regular css file but they don't seem to be able to handle the height: 100% attribute and instead display each image as very very big.
Does anyone have any suggestions as to how to change the code to something more stable, or to work a way around loading the 'mobile' css file for the iPad without it interfering with small desktops which I think it would.
Thank you.
Besides using width: 100%, you can use the properties for example max-width: 400px and max-height:200px to prevent the image is very large.
Hope that helps some.
Regards.
I have a website that requires a very large background image. The page loads correctly in all web browsers I have tried except the Safari on the iPhone and the iPad. In Safari on these two mobile devices the background only covers the left 50% of the page.
From all the testing I have done I can tell that is because of the length of the background image I am using. This is my css:
#bodyLong
{
background-image:url('/Images/TaylorProductsBackground3459.jpg');
background-repeat:no-repeat;
width: 1150px;
height: 3459px;
margin: 0 auto;
text-align: left;
padding: 0px;
position:relative;
}
I know that there is something specifically wrong in this case because if I make one change to the CSS and set height: 1000px;, the background image is no longer shown twice across the back of the page. What can I do to fix this? I would prefer not to use such a large image but it is a client request and I have not been able to convince them otherwise.
I think you are running hard into a limit of the iOS version of Safari. Check all the doco on creating web pages for mobile devices and you might find something about image size limits.
Check the answer here: Image size limitations in mobile safari?
Possible solutions might be to use a smaller image size and scale it up if detail is not important, or to break up the image and tile it.
But seriously, why would you need a 3500px sized image as a background. Bad idea(TM)
I know there has been some talk about large images not rendering well on the new iPad because of a limitation in WebKit. The workaround is to use progressive Jpegs. Try saving your image as a progressive Jpeg and see if that fixes the problem.
You need to make sure the image matches the screen resolution and you need to make sure you retina and non retina sizes
Our site renders with inconsistent font sizes on mobile Safari -- and as far as we can tell, only Mobile Safari. This very much has stumped us.
We analyzed the site with Firebug, and the incorrect areas are inheriting the right styles, yet the fonts are still rendered with the wrong sizes.
1) Visit http://www.panabee.com.
2) Conduct a search for a domain name.
The boxes on the left side show the incorrect font sizes. The font size should match the font size on the right side (both box titles and box copy). For instance, the titles, "Variations" and "Twitter," are much larger than the title, "Alternate Endings."
Any clue why?
Mobile Safari (like Chrome for Android, Mobile Firefox and IE Mobile) increases the font size of wide blocks (at all times), such that if you double-tap to zoom in on that block (which fits the block to the screen width), the text will be legible. If you set -webkit-text-size-adjust: 100% (or none), it won't be able to do this, and so when a user double-taps to zoom in on wide blocks the text will be illegibly small; users will be able to read it if they pinch-zoom in, but then the text will be wider than the screen and they'll have to pan horizontally to read each line of text!
Ideally you would fix this by using Responsive Web Design techniques to make your design adapt to mobile screen sizes (in which case you would no longer have any very wide blocks, so mobile browsers would no longer adjust your font sizes).
If that's not an option, and you're stuck serving a desktop site to mobile users, then see if you can tweak your design so none of your blocks of text are wider than the mobile device's device-width (e.g. 320px for many portrait phones) (you can use mobile-specific css to avoid affecting desktop browsers), then Mobile Safari won't need to increase any font sizes (and browsers which reflow text, like the Android Browser and Opera Mobile, also won't need to change your layout).
Finally if you really need to prevent Mobile Safari from adjusting your font sizes you can set -webkit-text-size-adjust: 100%, but do this only as a last resort since it is likely to cause mobile users to have difficulty reading your text, as it'll either be too small or they'll have to pan from side to side after every line they read. Note that you must use 100% not none because none has nasty side-effects in desktop browsers. There are also equivalent -moz-text-size-adjust and -ms-text-size-adjust properties for Mobile Firefox and IE Mobile.
Edit: for example in your case the simplest is probably the 2nd alternative, so you could try adding the following CSS:
/* Mobile browsers only */
#media only screen and (max-device-width: 480px) {
table#all_results {
width: auto;
}
td#main_box {
width: 320px;
}
td#side_box {
width: 320px;
}
}
Though it's not ideal to hardcode 320px like this; you could improve on that by using a variety of CSS media queries, or getting the device-width from JavaScript.
Here's what ultimately worked (tested only on iPhone 4 tho):
/* Mobile browsers only */
#media only screen and (max-device-width: 480px) {
td#main_box { -webkit-text-size-adjust:100% }
}
We awarded the answer to John since his solution was the basis of this one.
Probably not the most elegant answer, but it works.
-webkit-text-size-adjust: none; will cause you to not be able to zoom in mobile devices. You should use 100% instead.
-webkit-text-size-adjust:none;
will probably solve your problem.
target-element { -webkit-text-size-adjust:80% }
will still zoom but keeps it 80% smaller than webkits default.
In my case I had a <p> element and I solved this issue by adding:
width: fit-content;
To it. I was able to reproduce this on Safari mobile as well.
I have fixed font sizes issue by using css hack for IOS app and IOS safari browser.
#supports (-webkit-touch-callout: none) {
//you can write your custom css for IOS safari browser.
}
The native audio control does not render correctly on the iPhone or the iPhone simulator.
Go to http://www.anmldr.com/audio and see what I am seeing.
The native audio control will cover up the preceding paragraph and the drop shadow is slightly covering the following paragraph. Even if I put it in a containing div and have a margin-top and a margin-bottom, this does not seem to work.
The width of the native audio control is apparently too small because all of the icons and the counter, etc are all crowded together and on top of each other. The control shows "Loading" continuously until you actually start playing it. Then the numbers appear but they are superimposed on each other.
Is there a way to style the native audio control? Width? Margin?
Linda
Answering my own question...
I figured out that the CSS attributes selector will allow me to style the native HTML5 audio control.
[controls] {
width:100%;
margin-top:1.25em;
margin-bottom:1.25em;
}
This solves the problem of the icons, etc. overlapping. It still does not solve the "Loading" message.
Linda
I have set up a web page to look good on the small screen of an iPhone, but when viewed on the desktop, and going right across the width of the browser, it looks terrible. Is there a way I can restrict the width to say, 480px when viewed on a big screen?
I tried
body {
margin-left:auto;
margin-right:auto;
max-width:480px;
}
but it seems to just set the width at 480px, even on an iPhone on portrait mode.
I think Media Types are what you're looking for.