I'm experiencing a weird issue with the mobile responsive layout of a website.
The address is https://melec.vercel.app/
On desktop using dev tools > responsive, it works correctly, also on any android device you get the correct mobile experience but in iOS devices (tested on 2 iphones) the website renders incorrectly, it seems to have the double of the actual available screen width.
For reference I'm using tailwindcss, tailwindui and nextjs.
In this image you can see the scroll bar for horizontal movement.
Here you can see how I can freely move horizontally, this doesn't happen on dev tools or android devices.
Also when I press the mobile burger the whole layout shrinks a bit.
it is because the top part "flex-shrink-0 flex items-center".
I entered a "max-width: 100%;".
I have created a webapp that is exhibiting different behavior between an installed PWA and in normal mobile safari on iOS after an orientation change. When I flip my iPhone or iPad from portrait to landscape and back to portrait again, sometimes the portrait orientation will be zoomed in (and sometimes not). This only occurs in the installed progressive web app (PWA) and not when viewed in the normal mobile safari. Additionally, this behavior occurs only for an iOS PWA (both iPhone and iPad) and not for an Android PWA.
Do you have any ideas as to why this is occurring and/or possible remedies? I have already tried disabling zoom on orientation change, reordering my css for the different orientations, setting the focus to a large constant div prior to and after orientation change, and increasing default font/input sizes.
I'm running Firefox OS 2.0 simulator via Firefox WebIDE.
The MDN Firefox OS doc only states 320x480 pixels for the device size, but some of the supported devices have much higher resolutions available.
I would like to be able to change the device screen size so I can test my application in the simulator with different display sizes - how is this done?
Here is an image from the WebIDE showing the Device Settings disabled:
I'm using Firefox version 39.
Simulator configuration was recently made available in Firefox 42. This gives you access to options like the window size:
Switching to Nightly to access Firefox 42 is likely the best path for now, since a number of related bugs were recently fixed in that version.
We're making an app in phonegap using web-pages in the UIWebView, and in this product we allow apple's emojis, which we apply the AppleColorEmoji font to, making it possible to scale them.
After updating to IOS 7 on both iPad and iPhone, the emoji with font AppleColorEmoji that previously allowed for scaling to whichever size wanted, no longer scales beyond 16px font-size (it can scale smaller). It still scales as intended on the devices with IOS <7
I fear this is something they introduced in IOS 7 intentionally. Have anyone else experienced this problem, and perhaps even a solution to it?
In Webkit, to scale such emoji character in a HTML element:
<span style="-webkit-transform: scale(5); position: absolute;">👿</span>
Downsides to the above include that the positioning will need adjusting for the size, since the transform has to be applied to elements with position absolute. Pixelation could also happen, if the emoji is transformed too large.
If this is still interesting for anyone (I forgot that this was still open) then the "solution" was to set the meta tag for iPhones to:
<meta name="viewport" content="width=320"/>
This ensures that the iPhone scales the content up to fit the 640 pixels (or more) the screen has, and the emojis with 16px size will now be twice as big. However, this will only scale them up to a reasonable size. It still doesn't fix it for the people wanting to control the font-size completely.
Nowadays, you can use image files from Google Noto, EmojiOne, Twemoji, or Emojidex.
Even if you don't have scaling issues, this ensures that emoji characters display correctly in every browser.
iOS WebKit https://trac.webkit.org/changeset/188737 fixes this (but it hasn't shipped yet).
Looks like this one is fixed in iOS 10.
I have a great scenario here to learn if it's the OS:
I have an iPhone 4s, iOS 9.3.5: small emoji
I have an iPhone 5s, iOS 9.3.5: small emoji
I have an iPhone 6s, iOS 10 GM: big emoji scale from css font-size property
I am updating the iPhone 5s from 9.3.5 to iOS 10.0 as I type this, so we'll see if this fixes it.
My initial hypothesis was that it was related to viewport size, but after hooking the 4s/9.3.5 up to the safari browser tools with the 30-pin cable interestingly, the bounding boxes of the emoji scale, just not the glyph on screen. There's no way I was able to effect that with CSS.
¯\_(ツ)_/¯ I'll update this once the 5s updates.
Edit: Once I updated the 5s to 10.0 the emojis were resizing. It looks like iOS version was the issue.
If you want to scale Emoji characters more than 16px, then you'll have to use AppleColorEmoji Fonts. This is the only available font that can scale Emoji beyond 16px.
I'm developing an app on the iPad, and trying to detect multi-touch events. The events are working fine, but in the simulator, I'm not getting the little circles that show you where you're touching. Not so much an issue for single touch, but for multi touch, it's a big pain. Any idea why these circles aren't showing? I think it's something with my machine (MacBook Pro), because on another MacBook Pro, the circles do show up.
Edit
I've discovered that this problem only happens if the scale is set to 100%; if I set the scale to 50%, the circles show up.