Preservar o tamanho da fonte HTML quando a orientação do iPhone muda de retrato para paisagem

Eu tenho um aplicativo da web móvel com uma lista não ordenada que contém vários itens de lista com um hiperlink dentro de cada li:

... Minha pergunta é como posso formatar os hiperlinks para que eles não mudem de tamanho quando vistos em um iPhone, e o acelerômetro muda de retrato -> paisagem? No momento, tenho o tamanho da fonte do hiperlink especificado para 14px, mas, ao mudar para paisagem, ele aumenta até 20px. Quero que o tamanho da fonte permaneça o mesmo. Aqui está o código:

ul li a
{
  font-size:14px;
  text-decoration: none;
  color: #cc9999;
}

<ul>
  <li id="home" class="active">
    <a href="home.html">HOME</a>
  </li>
  <li id="home" class="active">
    <a href="test.html">TEST</a>
  </li>
</ul>

Você pode desativar esse comportamento através da -webkit-text-size-adjustpropriedade CSS:

html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

O uso desta propriedade é descrito mais detalhadamente no Guia de Conteúdo da Web do Safari .

Nota: se você usar

html {
    -webkit-text-size-adjust: none;
}

isso desativará o comportamento do zoom nos navegadores padrão. Uma solução melhor é:

html {
    -webkit-text-size-adjust: 100%;
}

Isso corrige o comportamento do iPhone / iPad, sem alterar o comportamento da área de trabalho.

Usando -webkit-text-size-Adjust: none; diretamente no html interrompe a capacidade de ampliar o texto em todos os navegadores de kit da web. Você deve combinar isso com algumas consultas de mídia específicas para iOS. Por exemplo:

@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {
     html {
        -webkit-text-size-adjust: none;
     }
}

Como foi mencionado anteriormente, a regra CSS

 -webkit-text-size-adjust: none

não funciona mais em dispositivos modernos.

Felizmente, existe uma nova solução para iOS5 e iOS6 (todo: o que acontece com iOS7?) :

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

Você também pode adicionar , user-scalable=0para desativar o zoom de pitada, para que seu site se comporte como um aplicativo nativo. Se o seu design travar quando o usuário aumentar o zoom, use esta metatag em vez disso:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

Você pode adicionar uma meta no cabeçalho HTML:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

Você também pode optar por usar uma redefinição de CSS, como normalize.css , que inclui a mesma regra que o crazygringo recomenda:

/**
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

Como você vê, também inclui uma regra específica do fornecedor para o telefone IE.

Para obter informações atuais sobre a implementação em diferentes navegadores, consulte a página de referência do MDN .

O código abaixo funciona para mim.

html{-webkit-text-size-adjust: 100%;}

Tente limpar o cache do navegador se ele não funcionar.

Em março de 2019 , o ajuste do tamanho do texto tem um suporte razoável entre os navegadores móveis .

body {
  text-size-adjust: none;
}

O uso da viewportmetatag não afeta o ajuste do tamanho do texto e a configuração user-scalable: no nem funciona no IOS Safari .

No meu caso, esse problema ocorreu porque eu usei o atributo CSS width: 100%para a tag HTMLinput type="text" .

Alterei o valor widthpara 60% e adicionei padding-right:38%.

input {
    padding-right: 38%;
    width: 60%;
}